Creating Real Layouts with Flexbox

Now that you know the basics of Flexbox in Tailwind, let’s apply them to build practical layout patterns like navigation bars, cards, and sidebar-page layouts.

1️⃣ Navbar with Logo and Links

<nav class="flex items-center justify-between p-4 bg-gray-800 text-white">
  <div class=" font-bold">MySite</div>
  <div class="space-x-4">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

2️⃣ Two-Column Layout (Sidebar + Content)

<div class="flex">
  <aside class="w-1/4 bg-gray-100 p-4">Sidebar</aside>
  <main class="flex-1 bg-white p-4">Main Content</main>
</div>

3️⃣ Card Layout with Flex Column

<div class="flex flex-col md:flex-row gap-4">
  <div class="bg-white p-4 shadow rounded flex-1">Card 1</div>
  <div class="bg-white p-4 shadow rounded flex-1">Card 2</div>
</div>

4️⃣ Pricing Table with Equal Height

<div class="flex flex-col md:flex-row gap-4">
  <div class="flex flex-col flex-1 bg-gray-100 p-6 rounded">
    <h3 class="text-xl font-bold mb-2">Basic</h3>
    <p class="flex-grow">Some features</p>
    <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded">Select</button>
  </div>
  <div class="flex flex-col flex-1 bg-gray-100 p-6 rounded">
    <h3 class="text-xl font-bold mb-2">Pro</h3>
    <p class="flex-grow">All features</p>
    <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded">Select</button>
  </div>
</div>

🧠 Summary

Flexbox lets you build responsive, consistent layouts like navbars, sidebars, cards, and pricing sections with minimal effort using Tailwind's utility classes.

✅ Tip: Combine flex, gap, justify-*, and items-* for perfect control!