Home
SHARIFUL ISLAM
Modern E-commerce Product Card with TailwindCSS

Modern E-commerce Product Card with TailwindCSS

This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

This tailwind example is contributed by SHARIFUL ISLAM, on 06-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us,Service rates, Subscription plans,Product Showcase, Product card

Card Feature showcase Pricing Product eCommerce

Author SHARIFUL ISLAM

211

Fork Fullscreen

<div class="mt-4">
    <h3 class="text-gray-800 font-medium text-base">
      Oraimo OHP-610 BoomPop 2 Dual Device Wireless Headphone
    </h3>
    <p class="uppercase text-green-600 text-xs font-medium">
      Oraimo
    </p>
    
    <div class="flex space-x-1 text-orange-500 text-sm mt-1">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927C9.349 2.2 10.651 2.2 10.951 2.927l1.558 3.779 4.004.37c.85.079 1.194 1.139.572 1.724l-2.922 2.658.87 3.917c.181.816-.68 1.448-1.419 1.034L10 13.01l-3.614 1.96c-.74.414-1.6-.218-1.419-1.034l.87-3.917-2.922-2.658c-.622-.585-.278-1.645.572-1.724l4.004-.37L9.049 2.927z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927C9.349 2.2 10.651 2.2 10.951 2.927l1.558 3.779 4.004.37c.85.079 1.194 1.139.572 1.724l-2.922 2.658.87 3.917c.181.816-.68 1.448-1.419 1.034L10 13.01l-3.614 1.96c-.74.414-1.6-.218-1.419-1.034l.87-3.917-2.922-2.658c-.622-.585-.278-1.645.572-1.724l4.004-.37L9.049 2.927z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927C9.349 2.2 10.651 2.2 10.951 2.927l1.558 3.779 4.004.37c.85.079 1.194 1.139.572 1.724l-2.922 2.658.87 3.917c.181.816-.68 1.448-1.419 1.034L10 13.01l-3.614 1.96c-.74.414-1.6-.218-1.419-1.034l.87-3.917-2.922-2.658c-.622-.585-.278-1.645.572-1.724l4.004-.37L9.049 2.927z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927C9.349 2.2 10.651 2.2 10.951 2.927l1.558 3.779 4.004.37c.85.079 1.194 1.139.572 1.724l-2.922 2.658.87 3.917c.181.816-.68 1.448-1.419 1.034L10 13.01l-3.614 1.96c-.74.414-1.6-.218-1.419-1.034l.87-3.917-2.922-2.658c-.622-.585-.278-1.645.572-1.724l4.004-.37L9.049 2.927z"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927C9.349 2.2 10.651 2.2 10.951 2.927l1.558 3.779 4.004.37c.85.079 1.194 1.139.572 1.724l-2.922 2.658.87 3.917c.181.816-.68 1.448-1.419 1.034L10 13.01l-3.614 1.96c-.74.414-1.6-.218-1.419-1.034l.87-3.917-2.922-2.658c-.622-.585-.278-1.645.572-1.724l4.004-.37L9.049 2.927z"/>
      </svg>
    </div>
    
    <div class="flex items-end justify-between">
      <div class="flex items-baseline space-x-2 mt-2">
      <span class="text-blue-600 text-xl font-semibold">$806.33</span>
      <span class="text-gray-400 text-sm line-through">$1500.00</span>
    </div>
     <button
      class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center shadow text-white">
     <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-shopping-cart"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M17 17h-11v-14h-2" /><path d="M6 5l14 1l-1 7h-13" /></svg>
    </button>
    </div>
  </div>
</div>

</div>

Related Examples

Pricing Table

Author:
Akshay

2 years ago

9.8k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

26.4k
Feature cards
Feature showcase

Author:
Steven Kuhn

2 years ago

9.4k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

11.1k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

2 years ago

47.2k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.3k
Feature Card
Elevated card

Author:
Prajwal Hallale

2 years ago

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

Author:
Noob

2 years ago

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

Author:
Noob

2 years ago

20.4k
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

10.7k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

11.5k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

8.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components