Responsive Design with Tailwind

<!-- Mobile-first responsive layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Stacks on mobile, 2 cols on tablet, 3 on desktop -->
  <div class="bg-white rounded-xl p-4 shadow">Card 1</div>
  <div class="bg-white rounded-xl p-4 shadow">Card 2</div>
  <div class="bg-white rounded-xl p-4 shadow">Card 3</div>
</div>

<!-- Responsive text sizing -->
<h1 class="text-2xl md:text-4xl lg:text-5xl font-bold">
  Responsive Heading
</h1>

<!-- Show/hide at breakpoints -->
<nav class="hidden md:flex gap-4">Desktop nav links</nav>
<button class="md:hidden">☰ Mobile Menu</button>

<!-- Responsive padding -->
<section class="px-4 py-8 md:px-8 lg:px-16 lg:py-16">
  Content with responsive spacing
</section>