depth isometric tile perspective board dashboard board previews faux-3D gallery tiles showcase cards with architectural feel flat previews need more structure want isometric depth without illustration need a stronger board presentation
Isometric Tile
Fetch snippet JSON:
curl https://webspire.de/snippets/depth/isometric-tile.json Isometric
The plane itself tilts, so the surface reads as a physical object instead of a flat card.
Background
Customize
Quick Start
<div class="isometric-tile relative rounded-[1.75rem] p-8"></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 656 bytes · 21 lines
- Custom Properties
-
--iso-perspective--iso-tilt-x--iso-tilt-z--iso-duration - Classes
-
.isometric-tile
depth isometric tile perspective board
This snippet gives flat boards an isometric posture. It is useful when you want a stronger architectural or productized look without full 3D rendering.