Part 26: Building an E-Commerce Product Grid & Dashboard

Let's combine CSS Grid, Flexbox, badges, and responsive utilities into a production-grade Product Catalog.

Complete E-Commerce Catalog Layout

<div class="max-w-7xl mx-auto px-4 py-10">
  <div class="flex justify-between items-center mb-8">
    <div>
      <h2 class="text-3xl font-extrabold text-slate-900">Featured Products</h2>
      <p class="text-slate-500 mt-1">Explore our premium mechanical keyboards</p>
    </div>
    <span class="text-sm font-semibold text-blue-600 cursor-pointer hover:underline">View All &rarr;</span>
  </div>

  <!-- Responsive Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    <!-- Product Card -->
    <div class="group relative bg-white rounded-2xl border border-slate-100 p-4 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col">
      <!-- Image Wrapper with Overflow Hidden -->
      <div class="relative w-full h-52 bg-slate-100 rounded-xl overflow-hidden mb-4">
        <img 
          src="https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=500" 
          alt="Keyboard" 
          class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
        />
        <span class="absolute top-2.5 left-2.5 bg-blue-600 text-white text-[11px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider">
          New
        </span>
      </div>

      <!-- Details -->
      <div class="flex-1 flex flex-col justify-between">
        <div>
          <span class="text-xs text-slate-400 font-medium">Peripherals</span>
          <h3 class="font-bold text-slate-900 group-hover:text-blue-600 transition-colors mt-0.5">
            Keychron Pro Wireless
          </h3>
        </div>

        <div class="mt-4 flex items-center justify-between">
          <span class="text-xl font-extrabold text-slate-900">$149.00</span>
          <button class="px-3.5 py-1.5 bg-slate-900 text-white text-xs font-semibold rounded-lg hover:bg-blue-600 transition">
            Add to Cart
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Key Takeaways

• Grid structures the multi-item layout cleanly.
• Flexbox powers internal alignment inside each card.
• group-hover:scale-105 creates smooth zoom interactions on images.

In Part 27, we enter Module 5 to master Typography, Colors & Visual Design!