E-Commerce Product Grid

Source: Tailwind Components – Product Cards

1. Product Card Structure

<div class="bg-white shadow-md rounded p-4">
    <img src="product.jpg" alt="Product" class="w-full h-48 object-cover mb-4 rounded">
    <h3 class=" font-semibold">Product Name</h3>
    <p class="text-gray-500 text-sm">Short description here</p>
    <div class="flex justify-between items-center mt-3">
        <span class="text-blue-600  dark:text-blue-400 font-bold">$29.99</span>
        <button class="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600">Buy</button>
    </div>
</div>
            

2. Responsive Grid Layout

Use responsive Tailwind grid classes:

<section class="grid gap-6 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Repeat Product Card Here -->
</section>
            

3. Enhancements

• Add hover effects: hover:shadow-lg, hover:scale-105
• Use transition for smooth interactions
• Display badges like "Sale" or "New" with absolute positioning
• Lazy load images using loading="lazy"

4. Complete Example

<section class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
  <div class="bg-white rounded-lg shadow p-4 hover:shadow-xl transition">
    <img src="shoe.jpg" alt="Sneakers" class="w-full h-48 object-cover mb-4 rounded">
    <h3 class=" font-semibold">Stylish Sneakers</h3>
    <p class="text-gray-500 text-sm">Comfortable and trendy shoes for all-day wear.</p>
    <div class="flex justify-between items-center mt-3">
        <span class="text-green-600 font-bold">$49.99</span>
        <button class="bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">Add to Cart</button>
    </div>
  </div>

  <!-- Repeat other products... -->
</section>
            

Conclusion

Tailwind CSS makes it easy to build responsive, attractive product grids with minimal effort. Combine utility classes for layout, style, and interactivity to deliver a sleek shopping experience.