Back to Discover
Tailwind CSS Product Card Layout

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-900 mb-8">Featured Products</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card 1 -->
      <div x-data="{ liked: false }" class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">
        <div class="relative">
          <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&h=400&fit=crop" 
               alt="Product" 
               class="w-full h-64 object-cover">
          <button @click="liked = !liked" 
                  class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform">
            <ion-icon :name="liked ? 'heart' : 'heart-outline'" 
                      :class="liked ? 'text-red-500' : 'text-gray-600'" 
                      class="text-xl"></ion-icon>
          </button>
          <span class="absolute top-4 left-4 bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">New</span>
        </div>
        <div class="p-6">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Electronics</span>
            <div class="flex items-center text-yellow-400">
              <ion-icon name="star" class="text-sm"></ion-icon>
              <span class="text-gray-600 text-sm ml-1">4.8</span>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Premium Wireless Headphones</h3>
          <p class="text-gray-600 text-sm mb-4 line-clamp-2">Experience crystal-clear audio with advanced noise cancellation technology.</p>
          <div class="flex items-center justify-between">
            <div class="flex flex-col">
              <span class="text-2xl font-bold text-gray-900">$299</span>
              <span class="text-sm text-gray-500 line-through">$399</span>
            </div>
            <button class="bg-gray-900 text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2">
              <ion-icon name="cart-outline"></ion-icon>
              <span class="text-sm font-medium">Add to Cart</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div x-data="{ liked: false }" class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">
        <div class="relative">
          <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&h=400&fit=crop" 
               alt="Product" 
               class="w-full h-64 object-cover">
          <button @click="liked = !liked" 
                  class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform">
            <ion-icon :name="liked ? 'heart' : 'heart-outline'" 
                      :class="liked ? 'text-red-500' : 'text-gray-600'" 
                      class="text-xl"></ion-icon>
          </button>
          <span class="absolute top-4 left-4 bg-red-600 text-white text-xs font-semibold px-3 py-1 rounded-full">Sale</span>
        </div>
        <div class="p-6">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Fashion</span>
            <div class="flex items-center text-yellow-400">
              <ion-icon name="star" class="text-sm"></ion-icon>
              <span class="text-gray-600 text-sm ml-1">4.5</span>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Classic Analog Watch</h3>
          <p class="text-gray-600 text-sm mb-4 line-clamp-2">Elegant timepiece with genuine leather strap and sapphire crystal.</p>
          <div class="flex items-center justify-between">
            <div class="flex flex-col">
              <span class="text-2xl font-bold text-gray-900">$149</span>
              <span class="text-sm text-gray-500 line-through">$249</span>
            </div>
            <button class="bg-gray-900 text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2">
              <ion-icon name="cart-outline"></ion-icon>
              <span class="text-sm font-medium">Add to Cart</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div x-data="{ liked: false }" class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden">
        <div class="relative">
          <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=500&h=400&fit=crop" 
               alt="Product" 
               class="w-full h-64 object-cover">
          <button @click="liked = !liked" 
                  class="absolute top-4 right-4 bg-white rounded-full p-2 shadow-md hover:scale-110 transition-transform">
            <ion-icon :name="liked ? 'heart' : 'heart-outline'" 
                      :class="liked ? 'text-red-500' : 'text-gray-600'" 
                      class="text-xl"></ion-icon>
          </button>
        </div>
        <div class="p-6">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Accessories</span>
            <div class="flex items-center text-yellow-400">
              <ion-icon name="star" class="text-sm"></ion-icon>
              <span class="text-gray-600 text-sm ml-1">4.9</span>
            </div>
          </div>
          <h3 class="text-lg font-semibold text-gray-900 mb-2">Designer Sunglasses</h3>
          <p class="text-gray-600 text-sm mb-4 line-clamp-2">UV protection with polarized lenses and premium metal frame.</p>
          <div class="flex items-center justify-between">
            <div class="flex flex-col">
              <span class="text-2xl font-bold text-gray-900">$199</span>
            </div>
            <button class="bg-gray-900 text-white px-4 py-2 rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2">
              <ion-icon name="cart-outline"></ion-icon>
              <span class="text-sm font-medium">Add to Cart</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
Comments (0)

No comments yet. Be the first!