Part 20: Building Modern Flexbox Layouts: Headers, Cards & Navbars

Let's synthesize our Flexbox knowledge into practical, production-ready UI components.

1. Project 1: Responsive Sticky Application Navbar

<nav class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-slate-100 px-6 py-3">
  <div class="max-w-7xl mx-auto flex items-center justify-between">
    <!-- Brand Logo -->
    <a href="/" class="flex items-center gap-2">
      <div class="size-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">D</div>
      <span class="font-bold text-xl text-slate-800">Devify</span>
    </a>

    <!-- Navigation Links (Hidden on mobile) -->
    <div class="hidden md:flex items-center gap-8 text-sm font-medium text-slate-600">
      <a href="#features" class="hover:text-blue-600 transition">Features</a>
      <a href="#pricing" class="hover:text-blue-600 transition">Pricing</a>
      <a href="#blog" class="hover:text-blue-600 transition">Blog</a>
    </div>

    <!-- Actions -->
    <div class="flex items-center gap-3">
      <button class="px-4 py-2 text-sm font-semibold text-slate-700 hover:text-blue-600">Log In</button>
      <button class="px-4 py-2 text-sm font-semibold bg-blue-600 text-white rounded-lg hover:bg-blue-700 shadow-sm transition">Sign Up</button>
    </div>
  </div>
</nav>

2. Project 2: Social Media Post Card

<article class="max-w-md mx-auto bg-white p-5 rounded-2xl shadow-sm border border-slate-100 flex flex-col gap-4">
  <!-- Author Header -->
  <div class="flex items-center justify-between">
    <div class="flex items-center gap-3">
      <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100" class="size-11 rounded-full object-cover shrink-0" alt="Avatar" />
      <div>
        <h4 class="font-bold text-slate-900 leading-tight">Sarah Connor</h4>
        <span class="text-xs text-slate-400">Software Architect • 2h ago</span>
      </div>
    </div>
    <button class="text-slate-400 hover:text-slate-600 font-bold">•••</button>
  </div>

  <!-- Body -->
  <p class="text-slate-700 text-sm leading-relaxed">
    Just shipped our entire design system using Tailwind CSS and React! Developer velocity has skyrocketed. 🚀
  </p>

  <!-- Interactive Footer -->
  <div class="flex items-center justify-between border-t pt-3 text-slate-500 text-sm">
    <button class="flex items-center gap-1.5 hover:text-red-500">❤️ <span>242</span></button>
    <button class="flex items-center gap-1.5 hover:text-blue-500">💬 <span>38</span></button>
    <button class="flex items-center gap-1.5 hover:text-green-500">🔄 <span>19</span></button>
  </div>
</article>

Key Takeaways

• Flexbox powers navbars, cards, and media objects with minimal code.
• Compose utilities directly in HTML for immediate visual clarity.

In Part 21, we enter Module 4 to master CSS Grid Foundations!