<div class="grid grid-cols-3 gap-4 justify-items-center p-2 bg-gray-200 max-w-md">
<div class="bg-teal-400 p-4">1</div>
<div class="bg-teal-400 p-4">2</div>
<div class="bg-teal-400 p-4">3</div>
<div class="bg-teal-400 p-4">4</div>
<div class="bg-teal-400 p-4">5</div>
<div class="bg-teal-400 p-4">6</div>
</div>Browse ready-made Tailwind components that use this class.
Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.
Build websites faster with an AI Visual Editor
© 2026 Shuffle. All rights reserved.
See what you're getting before you commit.
Switch the editor to Grid and every page of your project appears side by side on one canvas. Arrange them freely, zoom in and out, and add as many new pages as you need in a few clicks.
Describe what you need in one chat and the Agent does the rest: it adds new sections, edits copy and styles, moves blocks around or removes them across your whole page. No modes, no switching, just tell it what to change.
Bring your designs to life with smooth, looping background videos. In the Multi-AI Designer, click "Add media" and create a video from your own image or one generated by AI, then mark where your text goes so it stays easy to read. Watch the video to see how it works.