diff --git a/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png b/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png
index 211b0233a19ec..6d1e55dea331e 100644
Binary files a/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png and b/frontend/__snapshots__/components-cards-insight-details--trends-multi--dark.png differ
diff --git a/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png b/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png
index ca7cbb5a61368..2e8f0380fb96a 100644
Binary files a/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png and b/frontend/__snapshots__/components-cards-insight-details--trends-multi--light.png differ
diff --git a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx
index 57554a8ff6f32..5f18bb9d6d5ea 100644
--- a/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx
+++ b/frontend/src/lib/components/AddToDashboard/AddToDashboardModal.tsx
@@ -159,8 +159,7 @@ export function AddToDashboardModal({
                     This insight is referenced on <strong className="text-text-3000">{currentDashboards.length}</strong>{' '}
                     {pluralize(currentDashboards.length, 'dashboard', 'dashboards', false)}
                 </div>
-                {/* eslint-disable-next-line react/forbid-dom-props */}
-                <div style={{ minHeight: 420 }}>
+                <div className="min-h-[420px]">
                     <AutoSizer>
                         {({ height, width }) => (
                             <List
diff --git a/frontend/src/lib/components/AnimatedCollapsible.tsx b/frontend/src/lib/components/AnimatedCollapsible.tsx
index e4d182c7e4c57..aaf3cb9947362 100644
--- a/frontend/src/lib/components/AnimatedCollapsible.tsx
+++ b/frontend/src/lib/components/AnimatedCollapsible.tsx
@@ -23,11 +23,10 @@ export function AnimatedCollapsible({
 
     return (
         <div
-            className="collapsible overflow-hidden"
+            className="collapsible overflow-hidden transition-all duration-100 ease-in-out"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 height,
-                transition: 'height 0.1s ease-in-out',
             }}
         >
             <div ref={collapsibleSectionRef}>{children}</div>
diff --git a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
index 0981bdce81ad9..dfaf04173d0f7 100644
--- a/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
+++ b/frontend/src/lib/components/Cards/TextCard/TextCard.stories.tsx
@@ -70,8 +70,7 @@ export const Template: Story = () => {
                     textTile={makeTextTile('showing handles')}
                 />
             </div>
-            {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div className="w-full" style={{ height: '200px' }}>
+            <div className="w-full h-[200px]">
                 <h5>Large Card</h5>
                 <TextCard
                     className="h-full w-full react-grid-item react-draggable cssTransforms react-resizable"
diff --git a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
index f3e20e99b42da..52b98e0efc982 100644
--- a/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
+++ b/frontend/src/lib/components/CommandPalette/DebugCHQueries.tsx
@@ -216,8 +216,7 @@ const BarChartWithLine: React.FC<{ data: DataPoint[] }> = ({ data }) => {
         }
     }, [data])
 
-    // eslint-disable-next-line react/forbid-dom-props
-    return <canvas ref={canvasRef} style={{ height: '300px', width: '100%' }} />
+    return <canvas ref={canvasRef} className="h-[300px] w-full" />
 }
 
 interface DebugCHQueriesProps {
diff --git a/frontend/src/lib/components/EditableField/EditableField.tsx b/frontend/src/lib/components/EditableField/EditableField.tsx
index 0a83602cf5c5f..25c43a33a2489 100644
--- a/frontend/src/lib/components/EditableField/EditableField.tsx
+++ b/frontend/src/lib/components/EditableField/EditableField.tsx
@@ -364,8 +364,9 @@ const AutosizeInput = React.forwardRef<HTMLInputElement, AutosizeInputProps>(fun
                 maxLength={maxLength}
                 autoFocus={autoFocus}
                 ref={mergedRefs}
+                className="box-content"
                 /* eslint-disable-next-line react/forbid-dom-props */
-                style={{ boxSizing: 'content-box', width: `${inputWidth}px` }}
+                style={{ width: `${inputWidth}px` }}
             />
             <div ref={sizerRef} className="EditableField__autosize__sizer">
                 {value}
diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
index 0b8ff1faedf49..f50490afea42a 100644
--- a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
+++ b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
@@ -669,16 +669,13 @@ export class HedgehogActor {
 
         return (
             <div
-                className="border rounded bg-white pointer-events-none"
+                className="border rounded bg-white pointer-events-none fixed z-[1000] origin-top-left"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
-                    position: 'fixed',
                     left: x,
                     bottom: y,
                     width: this.followMouse ? Math.sqrt((mouseX - x) ** 2 + (mouseY - y) ** 2) : 0,
                     height: 3,
-                    zIndex: 1000,
-                    transformOrigin: '0 0',
                     transform: `rotate(${Math.atan2(y - mouseY, mouseX - x)}rad)`,
                 }}
             />
@@ -775,7 +772,7 @@ export class HedgehogActor {
                             ref?.(r)
                         }
                     }}
-                    className="HedgehogBuddy"
+                    className="HedgehogBuddy cursor-pointer m-0"
                     data-content={preloadContent}
                     onTouchStart={this.static ? undefined : () => onTouchOrMouseStart()}
                     onMouseDown={this.static ? undefined : () => onTouchOrMouseStart()}
@@ -788,8 +785,6 @@ export class HedgehogActor {
                         left: this.static ? undefined : this.x,
                         bottom: this.static ? undefined : this.y - SHADOW_HEIGHT * 0.5,
                         transition: !(this.isDragging || this.followMouse) ? `all ${1000 / FPS}ms` : undefined,
-                        cursor: 'pointer',
-                        margin: 0,
                     }}
                 >
                     {this.tooltip && !this.isDragging && (
@@ -816,9 +811,9 @@ export class HedgehogActor {
                     >
                         {this.mainAnimation ? (
                             <div
+                                className="image-rendering-pixelated"
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    imageRendering: 'pixelated',
                                     width: SPRITE_SIZE,
                                     height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteUrl(
@@ -837,15 +832,10 @@ export class HedgehogActor {
 
                         {this.accessories().map((accessory, index) => (
                             <div
+                                className={`absolute top-0 left-0 w-[${SPRITE_SIZE}px] h-[${SPRITE_SIZE}px] image-rendering-pixelated`}
                                 key={index}
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    imageRendering: 'pixelated',
-                                    width: SPRITE_SIZE,
-                                    height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteAccessoryUrl(accessory.img)})`,
                                     transform: accessoryPosition
                                         ? `translate3d(${accessoryPosition[0]}px, ${accessoryPosition[1]}px, 0)`
@@ -856,14 +846,9 @@ export class HedgehogActor {
                         ))}
                         {this.overlayAnimation ? (
                             <div
+                                className={`absolute top-0 left-0 w-[${SPRITE_SIZE}px] h-[${SPRITE_SIZE}px] image-rendering-pixelated`}
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
-                                    position: 'absolute',
-                                    top: 0,
-                                    left: 0,
-                                    imageRendering: 'pixelated',
-                                    width: SPRITE_SIZE,
-                                    height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteOverlayUrl(this.overlayAnimation.spriteInfo.img)})`,
                                     backgroundPosition: `-${
                                         (this.overlayAnimation.frame % X_FRAMES) * SPRITE_SIZE
@@ -886,11 +871,10 @@ export class HedgehogActor {
                                 return (
                                     <div
                                         key={i}
+                                        className="fixed pointer-events-none"
                                         // eslint-disable-next-line react/forbid-dom-props
                                         style={{
                                             outline: '1px solid red',
-                                            position: 'fixed',
-                                            pointerEvents: 'none',
                                             top: window.innerHeight - box.y - box.height,
                                             left: box.x,
                                             width: box.width,
diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyRender.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyRender.tsx
index 8c766f9bda66e..c3259f138dc5c 100644
--- a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyRender.tsx
+++ b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddyRender.tsx
@@ -19,12 +19,11 @@ export function HedgehogBuddyStatic({
 
     return (
         <div
-            className="relative overflow-hidden select-none flex-none"
+            className="relative overflow-hidden select-none flex-none m-[-2px]"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: imgSize,
                 height: imgSize,
-                margin: -2,
             }}
         >
             <div
@@ -63,13 +62,7 @@ export function HedgehogBuddyProfile({ size, ...props }: HedgehogBuddyStaticProp
                 height: size,
             }}
         >
-            <div
-                className="absolute top-0 left-0 w-full h-full"
-                // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    transform: 'translate(-3%, 10%) scale(1.8)',
-                }}
-            >
+            <div className="absolute top-0 left-0 w-full h-full transform translate-x-[-3%] translate-y-[10%] scale-[1.8]">
                 <HedgehogBuddyStatic {...props} size={size} />
             </div>
         </div>
diff --git a/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
index 1e5cdbfb694e1..c7c588bd9a6d1 100644
--- a/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
+++ b/frontend/src/lib/components/IframedToolbarBrowser/IframedToolbarBrowser.tsx
@@ -54,14 +54,10 @@ export function IframedToolbarBrowser({
             <LoadingOverlay />
             <iframe
                 ref={iframeRef}
-                className="w-full h-full"
+                className="w-full h-full bg-white"
                 src={appEditorUrl(browserUrl + '/' + initialPath, {
                     userIntent: userIntent,
                 })}
-                // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    background: '#FFF',
-                }}
                 onLoad={onIframeLoad}
                 // these two sandbox values are necessary so that the site and toolbar can run
                 // this is a very loose sandbox,
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
index f991ee5fb8920..46acf01c29847 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.tsx
@@ -157,8 +157,7 @@ function ColumnConfiguratorModal({ query }: ColumnConfiguratorProps): JSX.Elemen
                     </div>
                     <div className="HalfColumn">
                         <h4 className="secondary uppercase text-muted">Available columns</h4>
-                        {/* eslint-disable-next-line react/forbid-dom-props */}
-                        <div style={{ height: 360 }}>
+                        <div className="h-[360px]">
                             <AutoSizer>
                                 {({ height, width }: { height: number; width: number }) => (
                                     <TaxonomicFilter
diff --git a/frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx b/frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx
index 90e9009f72d9b..8265bac558368 100644
--- a/frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx
+++ b/frontend/src/scenes/dashboard/EmptyDashboardComponent.tsx
@@ -29,9 +29,7 @@ function SkeletonCardOne({ active }: { active: boolean }): JSX.Element {
                 {[100, 66, 33].map((height) => (
                     <div
                         key={height}
-                        className="border border-border-light rounded overflow-hidden flex flex-col justify-end"
-                        // eslint-disable-next-line react/forbid-dom-props
-                        style={{ width: '15%', height: '80%' }}
+                        className="border border-border-light rounded overflow-hidden flex flex-col justify-end w-[15%] h-[80%]"
                     >
                         {/* eslint-disable-next-line react/forbid-dom-props */}
                         <div style={{ height: `${height}%` }}>
@@ -54,10 +52,10 @@ function SkeletonBarsRaw({ active }: { active: boolean }): JSX.Element {
                     return (
                         <div
                             key={index}
+                            className="w-[12.5%]"
                             // eslint-disable-next-line react/forbid-dom-props
                             style={{
                                 height: `${height}%`,
-                                width: '12.5%',
                             }}
                         >
                             <LemonSkeleton active={active} className="h-full w-full" />
@@ -102,14 +100,12 @@ export function EmptyDashboardComponent({ loading, canEdit }: { loading: boolean
                     </div>
                 </div>
             )}
-            {/*  eslint-disable-next-line react/forbid-dom-props */}
-            <div className="flex items-center gap-2" style={{ height: '30rem' }}>
+            <div className="flex items-center gap-2 h-[30rem]">
                 <SkeletonCardOne active={loading} />
                 <SkeletonCardTwo active={loading} />
             </div>
             <div className="EmptyDashboard__fade">
-                {/*  eslint-disable-next-line react/forbid-dom-props */}
-                <div className="flex items-center gap-2" style={{ height: '30rem' }}>
+                <div className="flex items-center gap-2 h-[30rem]">
                     <SkeletonCardOne active={loading} />
                     <SkeletonCardTwo active={loading} />
                 </div>
diff --git a/frontend/src/scenes/data-model/NodeCanvasWithTable.tsx b/frontend/src/scenes/data-model/NodeCanvasWithTable.tsx
index 425f38d7a61ac..d1f5a052bfe02 100644
--- a/frontend/src/scenes/data-model/NodeCanvasWithTable.tsx
+++ b/frontend/src/scenes/data-model/NodeCanvasWithTable.tsx
@@ -354,9 +354,9 @@ const NodeCanvasWithTable = ({
                 return (
                     <div
                         key={nodeId}
+                        className="absolute"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            position: 'absolute',
                             left: `${position.x + offset.x}px`,
                             top: `${position.y + offset.y}px`,
                         }}
@@ -374,9 +374,9 @@ const NodeCanvasWithTable = ({
             })}
 
             <div
+                className="absolute"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
-                    position: 'absolute',
                     left: `${tablePosition.x + offset.x}px`,
                     top: `${tablePosition.y + offset.y}px`,
                 }}
diff --git a/frontend/src/scenes/debug/HogDebug.tsx b/frontend/src/scenes/debug/HogDebug.tsx
index d630d3238d9f9..c2339d759218f 100644
--- a/frontend/src/scenes/debug/HogDebug.tsx
+++ b/frontend/src/scenes/debug/HogDebug.tsx
@@ -44,8 +44,7 @@ export function HogQueryEditor(props: HogQueryEditorProps): JSX.Element {
         <div className="space-y-2">
             <div data-attr="hogql-query-editor" className={clsx('flex flex-col rounded space-y-2 w-full p-2 border')}>
                 <div className="relative flex-1 overflow-hidden">
-                    {/* eslint-disable-next-line react/forbid-dom-props */}
-                    <div className="resize-y overflow-hidden" style={{ height: 222 }}>
+                    <div className="resize-y overflow-hidden h-[222px]">
                         <CodeEditor
                             queryKey={props.queryKey ?? `new/${realKey}`}
                             className="border rounded overflow-hidden h-full"
diff --git a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
index 3b83a4ef79f20..99c561140e765 100644
--- a/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
+++ b/frontend/src/scenes/heatmaps/HeatmapsBrowser.tsx
@@ -242,14 +242,10 @@ function EmbeddedHeatmapBrowser({
                 <LoadingOverlay />
                 <iframe
                     ref={iframeRef}
-                    className="w-full h-full"
+                    className="w-full h-full bg-white"
                     src={appEditorUrl(browserUrl, {
                         userIntent: 'heatmaps',
                     })}
-                    // eslint-disable-next-line react/forbid-dom-props
-                    style={{
-                        background: '#FFF',
-                    }}
                     onLoad={onIframeLoad}
                     // these two sandbox values are necessary so that the site and toolbar can run
                     // this is a very loose sandbox,
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
index 8480c57d1f4e5..0ce194ebca5c0 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
@@ -375,12 +375,11 @@ export function ActionFilterRow({
 
     return (
         <li
-            className="ActionFilterRow"
+            className="ActionFilterRow relative"
             ref={setNodeRef}
             {...attributes}
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                position: 'relative',
                 zIndex: isDragging ? 1 : undefined,
                 transform: CSS.Translate.toString(transform),
                 transition,
diff --git a/frontend/src/scenes/insights/views/BoldNumber/Textfit.tsx b/frontend/src/scenes/insights/views/BoldNumber/Textfit.tsx
index b76f20f920ea3..86a59cc4e2b36 100644
--- a/frontend/src/scenes/insights/views/BoldNumber/Textfit.tsx
+++ b/frontend/src/scenes/insights/views/BoldNumber/Textfit.tsx
@@ -65,9 +65,9 @@ export const Textfit = ({ min, max, children }: TextfitProps): JSX.Element => {
     return (
         <div
             ref={parentRef}
-            className="w-full h-full flex items-center justify-center"
+            className="w-full h-full flex items-center justify-center leading-none"
             // eslint-disable-next-line react/forbid-dom-props
-            style={{ lineHeight: 1, fontSize: fontSizeRef.current }}
+            style={{ fontSize: fontSizeRef.current }}
         >
             <div ref={childRef} className="whitespace-nowrap">
                 {children}
diff --git a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
index 26b56bc771541..4e73e379aa841 100644
--- a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
+++ b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
@@ -302,8 +302,7 @@ function ErrorDetailsModal({ id }: { id: number | string }): JSX.Element {
             {!errorDetailsModalError || errorDetailsLoading ? (
                 <LemonSkeleton className="h-10" />
             ) : (
-                // eslint-disable-next-line react/forbid-dom-props
-                <div className="flex flex-col space-y-2" style={{ height: '80vh' }}>
+                <div className="flex flex-col space-y-2 h-[80vh]">
                     <div>
                         <span className="font-semibold">When:</span>{' '}
                         <TZLabel time={activeErrorDetails.timestamp} showSeconds />
diff --git a/frontend/src/scenes/pipeline/PipelinePluginImage.tsx b/frontend/src/scenes/pipeline/PipelinePluginImage.tsx
index 60ca929bb5fae..f377c48ddc759 100644
--- a/frontend/src/scenes/pipeline/PipelinePluginImage.tsx
+++ b/frontend/src/scenes/pipeline/PipelinePluginImage.tsx
@@ -54,14 +54,12 @@ export function PluginImage({
         />
     ) : (
         <div
-            className="plugin-image shrink-0"
+            className="plugin-image shrink-0 bg-contain bg-no-repeat"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: pixelSize,
                 height: pixelSize,
                 backgroundImage: `url(${state.image})`,
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
             }}
             // eslint-disable-next-line react/no-unknown-property
             onError={() => setState({ ...state, image: imgPluginDefault })}
diff --git a/frontend/src/scenes/pipeline/Transformations.tsx b/frontend/src/scenes/pipeline/Transformations.tsx
index 21f4ed3806f51..2d44a624ecbd4 100644
--- a/frontend/src/scenes/pipeline/Transformations.tsx
+++ b/frontend/src/scenes/pipeline/Transformations.tsx
@@ -238,10 +238,9 @@ const MinimalAppView = ({ transformation, order }: { transformation: Transformat
     return (
         <div
             ref={setNodeRef}
-            className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light"
+            className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light relative"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                position: 'relative',
                 transform: CSS.Transform.toString(transform),
                 transition,
                 zIndex: isDragging ? 999999 : undefined,
diff --git a/frontend/src/scenes/retention/RetentionModal.tsx b/frontend/src/scenes/retention/RetentionModal.tsx
index a64ee6974e100..bc9488889b5ba 100644
--- a/frontend/src/scenes/retention/RetentionModal.tsx
+++ b/frontend/src/scenes/retention/RetentionModal.tsx
@@ -129,8 +129,7 @@ export function RetentionModal(): JSX.Element | null {
                                 {people.result &&
                                     people.result.map((personAppearances: RetentionTableAppearanceType) => (
                                         <tr key={personAppearances.person.id}>
-                                            {/* eslint-disable-next-line react/forbid-dom-props */}
-                                            <td style={{ minWidth: 200 }}>
+                                            <td className="min-w-[200px]">
                                                 {isGroupType(personAppearances.person) ? (
                                                     <LemonButton
                                                         size="small"
diff --git a/frontend/src/scenes/saved-insights/SavedInsights.tsx b/frontend/src/scenes/saved-insights/SavedInsights.tsx
index f58bfd0a068ce..771d02dfa73cc 100644
--- a/frontend/src/scenes/saved-insights/SavedInsights.tsx
+++ b/frontend/src/scenes/saved-insights/SavedInsights.tsx
@@ -433,8 +433,7 @@ function SavedInsightsGrid(): JSX.Element {
                     )
                 })}
                 {insightsLoading && (
-                    // eslint-disable-next-line react/forbid-dom-props
-                    <div style={{ minHeight: '30rem' }}>
+                    <div className="min-h-[30rem]">
                         <SpinnerOverlay sceneLevel />
                     </div>
                 )}
diff --git a/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
index 31c7bdd0ababd..4cac89797864f 100644
--- a/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
+++ b/frontend/src/scenes/session-recordings/apm/playerInspector/ItemPerformanceEvent.tsx
@@ -234,11 +234,9 @@ export function ItemPerformanceEvent({
             >
                 <div className="flex-1 overflow-hidden">
                     <div
-                        className="absolute bg-primary rounded-sm opacity-75"
+                        className="absolute bg-primary rounded-sm opacity-75 h-1 bottom-0.5"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            height: 4,
-                            bottom: 2,
                             left: `${(startTime / contextLengthMs) * 100}%`,
                             width: `${Math.max((duration / contextLengthMs) * 100, 0.5)}%`,
                         }}
diff --git a/frontend/src/scenes/settings/Settings.tsx b/frontend/src/scenes/settings/Settings.tsx
index a5bb47abf3ea6..9237e8dee22bc 100644
--- a/frontend/src/scenes/settings/Settings.tsx
+++ b/frontend/src/scenes/settings/Settings.tsx
@@ -117,10 +117,7 @@ function SettingsRenderer(props: SettingsLogicProps): JSX.Element {
                     <div key={x.id} className="relative">
                         <div
                             id={x.id}
-                            className="absolute" // eslint-disable-next-line react/forbid-dom-props
-                            style={{
-                                marginTop: '-3.5rem', // Account for top bar when scrolling to anchor
-                            }}
+                            className="absolute -mt-14" // Account for top bar when scrolling to anchor
                         />
                         <h2 className="flex gap-2 items-center">
                             {x.title}
diff --git a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
index c3e71f16a9865..5d28310cc15b4 100644
--- a/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearanceUtils.tsx
@@ -26,10 +26,8 @@ export function PresentationTypeCard({
 }): JSX.Element {
     return (
         <div
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{ height: 180, width: 200 }}
             className={clsx(
-                'border rounded relative px-4 py-2 overflow-hidden',
+                'border rounded relative px-4 py-2 overflow-hidden h-[180px] w-[200px]',
                 active ? 'border-primary' : 'border-border'
             )}
         >
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index a8afb5e6c2ac4..5c96d2b6442bf 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -143,11 +143,7 @@ export default function SurveyEdit(): JSX.Element {
                                                     description="Use the PostHog API to show/hide your survey programmatically"
                                                     value={SurveyType.API}
                                                 >
-                                                    <div
-                                                        className="absolute left-4"
-                                                        // eslint-disable-next-line react/forbid-dom-props
-                                                        style={{ width: 350 }}
-                                                    >
+                                                    <div className="absolute left-4 w-[350px]">
                                                         <SurveyAPIEditor survey={survey} />
                                                     </div>
                                                 </PresentationTypeCard>
diff --git a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
index 6e5f520fbfd87..41e5805fc057f 100644
--- a/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
+++ b/frontend/src/scenes/surveys/SurveyEditQuestionRow.tsx
@@ -48,12 +48,11 @@ export function SurveyEditQuestionHeader({
 
     return (
         <div
-            className="flex flex-row w-full items-center justify-between"
+            className="flex flex-row w-full items-center justify-between relative"
             ref={setNodeRef}
             {...attributes}
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                position: 'relative',
                 zIndex: isDragging ? 1 : undefined,
                 transform: CSS.Translate.toString(transform),
                 transition,
diff --git a/frontend/src/toolbar/elements/AutocaptureElementLabel.tsx b/frontend/src/toolbar/elements/AutocaptureElementLabel.tsx
index 24b2aeb3f4d3e..153b4ba638423 100644
--- a/frontend/src/toolbar/elements/AutocaptureElementLabel.tsx
+++ b/frontend/src/toolbar/elements/AutocaptureElementLabel.tsx
@@ -32,9 +32,9 @@ export function AutocaptureElementLabel({
 
     return (
         <div
+            className="absolute"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
-                position: 'absolute',
                 top: `${inBounds(
                     window.pageYOffset - 1,
                     rect.top - 7 + window.pageYOffset,
diff --git a/frontend/src/toolbar/elements/ElementInfo.tsx b/frontend/src/toolbar/elements/ElementInfo.tsx
index d79f8c49453cc..9e3f2239915bc 100644
--- a/frontend/src/toolbar/elements/ElementInfo.tsx
+++ b/frontend/src/toolbar/elements/ElementInfo.tsx
@@ -46,14 +46,12 @@ export function ElementInfo(): JSX.Element | null {
 
     return (
         <>
-            {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div className="p-3" style={{ borderLeft: '5px solid #8F98FF', background: 'hsla(235, 100%, 99%, 1)' }}>
+            <div className="p-3 border-l-[5px] border-l-[#8F98FF] bg-[hsla(235,100%,99%,1)]">
                 <h1 className="section-title">Selected Element</h1>
                 <ActionStep actionStep={actionStep} />
             </div>
             {position ? (
-                /* eslint-disable-next-line react/forbid-dom-props */
-                <div className="p-3" style={{ borderLeft: '5px solid #FF9870', background: 'hsla(19, 99%, 99%, 1)' }}>
+                <div className="p-3 border-l-[5px] border-l-[#FF9870] bg-[hsla(19,99%,99%,1)]">
                     <h1 className="section-title">Stats</h1>
                     <p>
                         <IconCalendar /> <u>{dateRange}</u>
@@ -80,8 +78,8 @@ export function ElementInfo(): JSX.Element | null {
                     </div>
                 </div>
             ) : null}
-            {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div className="p-3" style={{ borderLeft: '5px solid #94D674', background: 'hsla(100, 74%, 98%, 1)' }}>
+            {}
+            <div className="p-3 border-l-[5px] border-l-[#94D674] bg-[hsla(100,74%,98%,1)]">
                 {!automaticActionCreationEnabled && (
                     <>
                         <h1 className="section-title">Actions ({activeMeta.actions.length})</h1>
diff --git a/frontend/src/toolbar/elements/ElementInfoWindow.tsx b/frontend/src/toolbar/elements/ElementInfoWindow.tsx
index 1c0d010f7541a..da8488a9d2876 100644
--- a/frontend/src/toolbar/elements/ElementInfoWindow.tsx
+++ b/frontend/src/toolbar/elements/ElementInfoWindow.tsx
@@ -65,59 +65,41 @@ export function ElementInfoWindow(): JSX.Element | null {
 
     return (
         <div
+            className="absolute z-[1] opacity-100 origin-top-left transition-opacity transition-shadow duration-200 bg-white"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 pointerEvents: pointerEvents ? 'all' : 'none',
-                position: 'absolute',
                 top,
                 bottom,
                 left,
                 width,
                 minHeight,
                 maxHeight,
-                zIndex: 1,
-                opacity: 1,
-                transformOrigin: 'top left',
-                transition: 'opacity 0.2s, box-shadow 0.2s',
                 backgroundBlendMode: 'multiply',
-                background: 'white',
             }}
         >
             {onClose ? (
                 <div
                     onClick={onClose}
+                    className="absolute origin-top-left bg-[#000] text-white rounded-full w-6 h-6 z-[7] flex items-center justify-around text-center cursor-pointer"
                     // eslint-disable-next-line react/forbid-dom-props
                     style={{
                         pointerEvents: pointerEvents ? 'all' : 'none',
-                        position: 'absolute',
                         top: -8,
                         right: left + width > windowWidth - 20 ? -6 : -12,
-                        transformOrigin: 'top left',
-                        background: 'black',
-                        color: 'white',
                         boxShadow: `hsla(4, 30%, 27%, 0.6) 0px 3px 10px 2px`,
-                        borderRadius: '100%',
-                        width: 24,
-                        height: 24,
-                        zIndex: 7,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-around',
-                        textAlign: 'center',
-                        cursor: 'pointer',
                     }}
                 >
                     <IconX />
                 </div>
             ) : null}
             <div
+                className="overflow-auto rounded-lg"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     minHeight,
                     maxHeight,
-                    overflow: 'auto',
                     boxShadow: `hsla(4, 30%, 27%, 0.6) 0px 3px 10px 2px`,
-                    borderRadius: '8px',
                 }}
             >
                 <ElementInfo />
diff --git a/frontend/src/toolbar/elements/Elements.tsx b/frontend/src/toolbar/elements/Elements.tsx
index 3e57984535b67..a75e992a991a7 100644
--- a/frontend/src/toolbar/elements/Elements.tsx
+++ b/frontend/src/toolbar/elements/Elements.tsx
@@ -34,21 +34,16 @@ export function Elements(): JSX.Element {
         <>
             <div
                 id="posthog-infowindow-container"
-                className="w-full h-full absolute top-0 left-0 pointer-events-none"
-                // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    zIndex: 2147483021,
-                }}
+                className="w-full h-full absolute top-0 left-0 pointer-events-none z-[2147483021]"
             >
                 <ElementInfoWindow />
             </div>
             <div
                 id="posthog-toolbar-elements"
-                className="w-full h-full absolute top-0 pointer-events-none"
+                className="w-full h-full absolute top-0 pointer-events-none z-[2147483010]"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     top: relativePositionCompensation,
-                    zIndex: 2147483010,
                 }}
             >
                 <ScrollDepth />
diff --git a/frontend/src/toolbar/elements/FocusRect.tsx b/frontend/src/toolbar/elements/FocusRect.tsx
index a61c7836829d8..046963aaaa277 100644
--- a/frontend/src/toolbar/elements/FocusRect.tsx
+++ b/frontend/src/toolbar/elements/FocusRect.tsx
@@ -37,17 +37,15 @@ export function FocusRect({ rect }: { rect: ElementRect }): JSX.Element {
             {rects.map((r) => (
                 <div
                     key={r.id}
+                    className="absolute z-10 transition-opacity duration-300"
                     // eslint-disable-next-line react/forbid-dom-props
                     style={{
-                        position: 'absolute',
                         top: r.y,
                         left: r.x,
                         width: r.w,
                         height: r.h,
-                        zIndex: 10,
                         background: r.bg,
                         backgroundBlendMode: 'multiply',
-                        transition: 'opacity 0.3s',
                     }}
                 />
             ))}
diff --git a/frontend/src/toolbar/elements/Heatmap.tsx b/frontend/src/toolbar/elements/Heatmap.tsx
index 09a2fb23e53d3..d5c7e41f07fa9 100644
--- a/frontend/src/toolbar/elements/Heatmap.tsx
+++ b/frontend/src/toolbar/elements/Heatmap.tsx
@@ -32,12 +32,11 @@ function HeatmapMouseInfo({
             }}
         >
             <div
-                className="absolute border rounded bg-bg-light shadow-md p-2 mx-2"
+                className="absolute border rounded bg-bg-light shadow-md p-2 mx-2 -translate-y-1/2"
                 // eslint-disable-next-line react/forbid-dom-props
                 style={{
                     left: leftPosition ? undefined : 0,
                     right: leftPosition ? 0 : undefined,
-                    transform: 'translateY(-50%)',
                 }}
             >
                 <span className="font-semibold whitespace-nowrap">
diff --git a/frontend/src/toolbar/elements/ScrollDepth.tsx b/frontend/src/toolbar/elements/ScrollDepth.tsx
index 9e929de52c745..e57976a9faf63 100644
--- a/frontend/src/toolbar/elements/ScrollDepth.tsx
+++ b/frontend/src/toolbar/elements/ScrollDepth.tsx
@@ -29,11 +29,10 @@ function ScrollDepthMouseInfo(): JSX.Element | null {
 
     return (
         <div
-            className="absolute left-0 right-0 flex items-center z-10"
+            className="absolute left-0 right-0 flex items-center z-10 -translate-y-1/2"
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 top: mouseY,
-                transform: 'translateY(-50%)',
             }}
         >
             <div className="border-b border-default w-full opacity-75" />
@@ -118,15 +117,12 @@ export function ScrollDepth(): JSX.Element | null {
                 {heatmapElements.map(({ y, count }, i) => (
                     <div
                         key={y}
+                        className="absolute left-0 w-full opacity-50"
                         // eslint-disable-next-line react/forbid-dom-props
                         style={{
-                            position: 'absolute',
                             top: heatmapElements[i - 1]?.y ?? 0,
-                            left: 0,
-                            width: '100%',
                             height: y - (heatmapElements[i - 1]?.y ?? 0),
                             backgroundColor: color(count),
-                            opacity: 0.5,
                         }}
                     />
                 ))}