Membangun komponen yang responsif dengan Tailwind:

Responsive navbar:

<nav class="flex flex-col md:flex-row md:items-center md:justify-between p-4">
  <div class="text-xl font-bold">Logo</div>
  <div class="mt-4 md:mt-0 flex flex-col md:flex-row gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

Responsive grid:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- Cards auto-adjust column count -->
</div>

Hide/show by screen size:

<button class="md:hidden">Menu ☰</button>
<nav class="hidden md:flex gap-4">
  <!-- Desktop menu -->
</nav>

Container:

<div class="container mx-auto px-4">
  <!-- Max-width content with center alignment -->
</div>