Product cards

Product cards for eCommerce

This tailwind example is contributed by ehmasuk, on 28-Oct-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Card Other Product eCommerce

Author ehmasuk

Tailwind v3.4 1.3k 2

Fork Fullscreen

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>

<div class="max-w-6xl mx-auto space-y-6">
  
  <div class="space-y-4">
    <div class="flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-900">Recent products</h2>
      <div
        class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-gray-100 text-gray-700">
        4 items</div>
    </div>
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
      <div class="rounded-lg bg-white shadow-sm border hover:shadow-md transition-shadow">
        <div class="relative">
          <a href="#">
            <img
              alt="product"
              class="w-full h-48 object-cover rounded-t-lg"
              src="https://plus.unsplash.com/premium_photo-1664392147011-2a720f214e01?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZHVjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600"
            />
          </a>
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors absolute top-2 right-2 bg-green-100 text-green-800">
            Active</div>
        </div>
        <div class="p-4">
          <div class="flex items-start justify-between mb-2">
            <a href="#">
              <h3 class="font-semibold text-gray-900 text-sm line-clamp-2 flex-1">Tesla Model 3 - Premium Electric Car
              </h3>
            </a>
          </div>
          <div class="space-y-2">
            <div class="flex items-center text-sm gap-1 text-gray-600">
              <i class="fas fa-map-marker-alt text-xs text-gray-500"></i>
              San Francisco, CA
            </div>
            <div class="flex items-center justify-between">
              <span class="text-lg font-bold text-[#E26038]">$89</span>
              <div
                class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs">
                Cars</div>
            </div>
            <div class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t">
              <div class="flex items-center gap-3">
                <span class="flex items-center gap-1">
                  <i class="far fa-eye text-xs"></i>
                  124
                </span>
                <span class="flex items-center gap-1">
                  <i class="far fa-heart text-xs"></i>
                  8
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rounded-lg bg-white shadow-sm border hover:shadow-md transition-shadow">
        <div class="relative">
          <a href="#">
            <img
              alt="product"
              class="w-full h-48 object-cover rounded-t-lg"
              src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cHJvZHVjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600"
            />
          </a>
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors absolute top-2 right-2 bg-green-100 text-green-800">
            Active</div>
        </div>
        <div class="p-4">
          <div class="flex items-start justify-between mb-2">
            <a href="#">
              <h3 class="font-semibold text-gray-900 text-sm line-clamp-2 flex-1">Tesla Model 3 - Premium Electric Car
              </h3>
            </a>
          </div>
          <div class="space-y-2">
            <div class="flex items-center text-sm gap-1 text-gray-600">
              <i class="fas fa-map-marker-alt text-xs text-gray-500"></i>
              San Francisco, CA
            </div>
            <div class="flex items-center justify-between">
              <span class="text-lg font-bold text-[#E26038]">$89</span>
              <div
                class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs">
                Cars</div>
            </div>
            <div class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t">
              <div class="flex items-center gap-3">
                <span class="flex items-center gap-1">
                  <i class="far fa-eye text-xs"></i>
                  124
                </span>
                <span class="flex items-center gap-1">
                  <i class="far fa-heart text-xs"></i>
                  8
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rounded-lg bg-white shadow-sm border hover:shadow-md transition-shadow">
        <div class="relative">
          <a href="#">
            <img
              alt="product"
              class="w-full h-48 object-cover rounded-t-lg"
              src="https://plus.unsplash.com/premium_photo-1679913792906-13ccc5c84d44?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8cHJvZHVjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600"
            />
          </a>
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors absolute top-2 right-2 bg-green-100 text-green-800">
            Active</div>
        </div>
        <div class="p-4">
          <div class="flex items-start justify-between mb-2">
            <a href="#">
              <h3 class="font-semibold text-gray-900 text-sm line-clamp-2 flex-1">Tesla Model 3 - Premium Electric Car
              </h3>
            </a>
          </div>
          <div class="space-y-2">
            <div class="flex items-center text-sm gap-1 text-gray-600">
              <i class="fas fa-map-marker-alt text-xs text-gray-500"></i>
              San Francisco, CA
            </div>
            <div class="flex items-center justify-between">
              <span class="text-lg font-bold text-[#E26038]">$89</span>
              <div
                class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs">
                Cars</div>
            </div>
            <div class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t">
              <div class="flex items-center gap-3">
                <span class="flex items-center gap-1">
                  <i class="far fa-eye text-xs"></i>
                  124
                </span>
                <span class="flex items-center gap-1">
                  <i class="far fa-heart text-xs"></i>
                  8
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rounded-lg bg-white shadow-sm border hover:shadow-md transition-shadow">
        <div class="relative">
          <a href="#">
            <img
              alt="product"
              class="w-full h-48 object-cover rounded-t-lg"
              src="https://images.unsplash.com/photo-1543163521-1bf539c55dd2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHByb2R1Y3R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=600"
            />
          </a>
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors absolute top-2 right-2 bg-green-100 text-green-800">
            Active</div>
        </div>
        <div class="p-4">
          <div class="flex items-start justify-between mb-2">
            <a href="#">
              <h3 class="font-semibold text-gray-900 text-sm line-clamp-2 flex-1">Tesla Model 3 - Premium Electric Car
              </h3>
            </a>
          </div>
          <div class="space-y-2">
            <div class="flex items-center text-sm gap-1 text-gray-600">
              <i class="fas fa-map-marker-alt text-xs text-gray-500"></i>
              San Francisco, CA
            </div>
            <div class="flex items-center justify-between">
              <span class="text-lg font-bold text-[#E26038]">$89</span>
              <div
                class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs">
                Cars</div>
            </div>
            <div class="flex items-center justify-between text-sm text-gray-500 pt-2 border-t">
              <div class="flex items-center gap-3">
                <span class="flex items-center gap-1">
                  <i class="far fa-eye text-xs"></i>
                  124
                </span>
                <span class="flex items-center gap-1">
                  <i class="far fa-heart text-xs"></i>
                  8
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="space-y-4">
    <div class="flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-900">Top products</h2>
      <div
        class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors bg-gray-100 text-gray-700">
        3 bookings</div>
    </div>
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <div class="rounded-lg bg-white shadow-sm border">
        <div class="p-4">
          <div class="flex gap-4">
            <img
              alt=""
              class="w-20 h-20 object-cover rounded-lg flex-shrink-0"
              src="https://images.unsplash.com/photo-1519669011783-4eaa95fa1b7d?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDZ8fHByb2R1Y3R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=600"
            />

<div class="flex-1 min-w-0">
              <div class="flex items-start justify-between mb-2">
                <h3 class="font-semibold text-gray-900 text-sm line-clamp-1">BMW X5 SUV</h3>
                <div
                  class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs bg-green-100 text-green-800">
                  Active</div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center gap-2">
                  <span class="relative flex shrink-0 overflow-hidden rounded-full h-6 w-6">
                    <img
                      class="aspect-square h-full w-full object-cover"
                      src="https://plus.unsplash.com/premium_photo-1683121366070-5ceb7e007a97?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200"
                    />
                  </span>
                  <span class="text-sm text-gray-600 truncate">Travis Lynch</span>
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <i class="far fa-calendar-alt text-xs text-gray-500 mr-2"></i>
                  <span class="truncate">Dec 28, 2024 - Dec 30, 2024</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-lg font-bold text-[#E26038]">$267</span>
                  <a href="#">
                    <button class="inline-flex items-center justify-center gap-2 transition-colors border h-9 rounded-md px-3 text-xs">View Details</button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rounded-lg bg-white shadow-sm border">
        <div class="p-4">
          <div class="flex gap-4">
            <img
              alt=""
              class="w-20 h-20 object-cover rounded-lg flex-shrink-0"
              src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODh8fHByb2R1Y3R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=600"
            />
            <div class="flex-1 min-w-0">
              <div class="flex items-start justify-between mb-2">
                <h3 class="font-semibold text-gray-900 text-sm line-clamp-1">BMW X5 SUV</h3>
                <div
                  class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs bg-green-100 text-green-800">
                  Active</div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center gap-2">
                  <span class="relative flex shrink-0 overflow-hidden rounded-full h-6 w-6">
                    <img
                      class="aspect-square h-full w-full object-cover"
                      src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200"
                    />
                  </span>
                  <span class="text-sm text-gray-600 truncate">Glen McCormick</span>
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <i class="far fa-calendar-alt text-xs text-gray-500 mr-2"></i>
                  <span class="truncate">Dec 28, 2024 - Dec 30, 2024</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-lg font-bold text-[#E26038]">$267</span>
                  <a href="#">
                    <button class="inline-flex items-center justify-center gap-2 transition-colors border h-9 rounded-md px-3 text-xs">View Details</button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="rounded-lg bg-white shadow-sm border">
        <div class="p-4">
          <div class="flex gap-4">
            <img
              alt=""
              class="w-20 h-20 object-cover rounded-lg flex-shrink-0"
              src="https://plus.unsplash.com/premium_photo-1679513691641-9aedddc94f96?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTA5fHxwcm9kdWN0fGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=600"
            />
            <div class="flex-1 min-w-0">
              <div class="flex items-start justify-between mb-2">
                <h3 class="font-semibold text-gray-900 text-sm line-clamp-1">BMW X5 SUV</h3>
                <div
                  class="inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold transition-colors text-xs bg-green-100 text-green-800">
                  Active</div>
              </div>
              <div class="space-y-2">
                <div class="flex items-center gap-2">
                  <span class="relative flex shrink-0 overflow-hidden rounded-full h-6 w-6">
                    <img
                      class="aspect-square h-full w-full object-cover"
                      src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200"
                    />
                  </span>
                  <span class="text-sm text-gray-600 truncate">Fanny Wade</span>
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <i class="far fa-calendar-alt text-xs text-gray-500 mr-2"></i>
                  <span class="truncate">Dec 28, 2024 - Dec 30, 2024</span>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-lg font-bold text-[#E26038]">$267</span>
                  <a href="#">
                    <button class="inline-flex items-center justify-center gap-2 transition-colors border h-9 rounded-md px-3 text-xs">View Details</button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Noob

4 years ago

18.7k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Product card

Simon Scheffer

3 years ago

32.4k
Product card

Oliver Hansen

3 years ago

10.7k
Product card

Oliver Hansen

3 years ago

14.5k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

3 years ago

20.1k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Shariar Hasan

2 years ago

4k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k