Flexbox & Grid in Tailwind

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <span class="font-semibold">Logo</span>
  <nav class="flex gap-2">
    <a class="hover:text-indigo-600">Home</a>
    <a class="hover:text-indigo-600">About</a>
  </nav>
</div>

<!-- Flex column, centered -->
<div class="flex flex-col items-center justify-center min-h-screen">
  <h1 class="text-4xl font-bold">Centered!</h1>
</div>

<!-- CSS Grid -->
<div class="grid grid-cols-12 gap-4">
  <aside class="col-span-3 bg-gray-50 p-4">Sidebar</aside>
  <main class="col-span-9 bg-white p-4">Main content</main>
</div>

<!-- Grid auto layout -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <!-- Automatically fills columns based on available space -->
  <div class="bg-white rounded-xl p-4 shadow">Auto card</div>
  <div class="bg-white rounded-xl p-4 shadow">Auto card</div>
  <div class="bg-white rounded-xl p-4 shadow">Auto card</div>
</div>