feature/tilt-react-demo - wip (#72)

jonathandion · Oct 15, 2023 · 9a98f14 · 9a98f14
1 parent 50c9604
commit 9a98f14
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/docs/components/tilt/tilt.component.tsx b/docs/components/tilt/tilt.component.tsx
@@ -2,10 +2,22 @@ import { Tilt } from '@jdion/tilt-react'
 
 export const TiltComponent = () => {
   return (
-    <Tilt className="h-[150px] mx-auto w-[300px] flex items-center justify-center rounded-xl border border-neutral-800">
-      <div className="flex items-center">
-        <div className="text-white text-4xl font-bold uppercase">Tilt ✨</div>
-      </div>
-    </Tilt>
+    <div className="container mx-auto p-20 flex items-center justify-center">
+
+      <Tilt
+        className="flex h-[150px] w-[300px] content-center items-center justify-center rounded-xl border border-neutral-800"
+        style={{
+          transformStyle: 'preserve-3d',
+        }}
+      >
+        <div style={{
+          transform: 'translateZ(60px)',
+        }}>
+          <span className="text-white text-4xl font-bold uppercase" role="img" aria-label="alien">
+            Tilt ✨
+          </span>
+        </div>
+      </Tilt>
+    </div>
   )
 }