How to recreate this 3D/tilted card grid effect with Tailwind CSS?

[vorluno]

Hi everyone! I'm trying to figure out how to build a layout similar to the one in the attached image.

I'm specifically interested in the 3D isometric rotation of the cards and how to position them in that grid pattern. Are there any specific Tailwind utility classes (like transform, rotate, perspective) or plugins you recommend to achieve this clean look? Any guidance or CodePen examples would be highly appreciated!

[wongjn]

That looks like part of the Tailwind CSS homepage. If so, you could consider reviewing the source code. As it turns out, it's built with Tailwind!

[vorluno]

Good catch. I'll check out the source code, thanks!

[aniruddhaadak80]

@vorluno Nice question - this effect is usually built from 3 parts working together:

1. a parent container with perspective
2. a grid wrapper with 3D rotation (rotateX/rotateY)
3. each card with preserve-3d plus subtle translate/rotate offsets

A practical Tailwind-first setup is:

• put perspective on the outer wrapper (including arbitrary value if needed)
• rotate the grid layer in 3D
• keep card transforms enabled, then add small hover lift/tilt for depth
• use shadow/overlay gradients to reinforce separation between layers

If you want, I can share a minimal snippet tuned for desktop/mobile breakpoints.

Sources:

• https://tailwindcss.com/docs/transform
• https://tailwindcss.com/docs/rotate
• https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

[sydneyvaughn75-ops]

Yes exactly thank you for the clarification

…

On Fri, Mar 13, 2026, 10:30 PM ANIRUDDHA ADAK ***@***.***> wrote: @vorluno <https://github.com/vorluno> Nice question - this effect is usually built from 3 parts working together: 1. a parent container with perspective 2. a grid wrapper with 3D rotation (rotateX/rotateY) 3. each card with preserve-3d plus subtle translate/rotate offsets A practical Tailwind-first setup is: - put perspective on the outer wrapper (including arbitrary value if needed) - rotate the grid layer in 3D - keep card transforms enabled, then add small hover lift/tilt for depth - use shadow/overlay gradients to reinforce separation between layers If you want, I can share a minimal snippet tuned for desktop/mobile breakpoints. Sources: - https://tailwindcss.com/docs/transform - https://tailwindcss.com/docs/rotate - https://developer.mozilla.org/en-US/docs/Web/CSS/perspective — Reply to this email directly, view it on GitHub <#19785 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B7HZNK5GTDCYZJODJYHQKAT4QTG3TAVCNFSM6AAAAACWO3SFZOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTMMJSGY3TOMI> . You are receiving this because you are subscribed to this thread.Message ID: <tailwindlabs/tailwindcss/repo-discussions/19785/comments/16126771@ github.com>