Code
tailwind
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded">Card 1</div>
<div class="bg-white p-4 rounded">Card 2</div>
<div class="bg-white p-4 rounded">Card 3</div>
</div>
<!-- Stacking to side-by-side -->
<div class="flex flex-col md:flex-row gap-6">
<aside class="md:w-1/4">Sidebar</aside>
<main class="md:w-3/4">Content</main>
</div>
<!-- Responsive text and spacing -->
<h1 class="text-2xl sm:text-3xl lg:text-5xl font-bold">
Scales with viewport
</h1>