Home
Quentin Rivers
E-commerce product card withTailwind CSS

E-commerce product card withTailwind CSS

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

Product eCommerce

Author Quentin Rivers

1.5k

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

Product Page
Showcase for the product.

Author:
Prem..

2 years ago

28.8k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

11.9k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

5.1k
Product details page
Beautiful product detail page with -multiple images -color options -quantity selection -buy now and add to wishlist buttons

Author:
Dika Rahman

10 months ago

9.7k
Product Page
Showcase for the product.

Author:
muhamadrofii911

9 months ago

1.8k
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.

Author:
SHARIFUL ISLAM

3 months ago

922
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

3 months ago

845
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

1 month ago

144
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

2 weeks ago

38
Hero

Author:
ORGIN_DREAMS

2 weeks ago

100
Product page
Product Information Card component that provides comprehensive details about a product, including an image, name, description, price, availability, color and size options, and a product description.

Author:
JaxStone

2 years ago

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

Author:
Rajesh Pandey

2 weeks ago

102

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components