E-commerce product card withTailwind CSS

This tailwind example is contributed by Quentin Rivers, on 05-Oct-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Product eCommerce

Author Quentin Rivers

Tailwind v3.4 3k 14

Fork Fullscreen

<div class="max-w-md w-full">
  <div
    class="bg-white rounded-2xl shadow-2xl overflow-hidden hover:shadow-3xl">
    <div class="relative">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-indigo-600 opacity-75"></div>
      <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxDb3NtaWMlMjBIZWFkcGhvbmVzfGVufDB8MHx8fDE3MjgxNTYwNTR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Product Image" class="w-full h-64 object-cover object-center relative z-10">
      <div
        class="absolute top-4 right-4 bg-gray-100 text-xs font-bold px-3 py-2 rounded-full z-20 transform rotate-12">
        NEW</div>
    </div>
    <div class="p-6">
      <h2 class="text-3xl font-extrabold text-gray-800 mb-2">Cosmic Headphones</h2>
      <p class="text-gray-600 mb-4">Experience music like never before with our state-of-the-art Cosmic Headphones.
        Immerse yourself in crystal-clear sound and unparalleled comfort.</p>
      <div class="flex items-center justify-between mb-4">
        <span class="text-2xl font-bold text-indigo-600">$299.99</span>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20"
            fill="currentColor">
            <path
              d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
          </svg>
          <span class="ml-1 text-gray-600">4.9 (120 reviews)</span>
        </div>
      </div>
      <button class="w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg">
            Add to Cart
      </button>
    </div>
  </div>
</div>

Related Examples

Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

1.9k
Product grid

ariaw

1 year ago

837
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Product card

Oliver Hansen

3 years ago

14.6k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Products information
Products information services and products display

Rushikesh Latpate

1 year ago

1.7k
Blog Card

Md. Tofayel islam

1 year ago

2.6k
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

SHARIFUL ISLAM

1 year ago

1.5k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Rajesh Pandey

1 year ago

1.9k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

728
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Card Product
Card Product for List Product

Ronny Camacho

9 months ago

859