Product card

sleek and modern product card

This tailwind example is contributed by OmKar Mehta, on 04-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Card Product eCommerce

Author OmKar Mehta

Tailwind v3.4 7.4k 14

Fork Fullscreen

<div class="flex flex-col gap-1 mt-4 px-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-50">Converse Sneakers</h2>
      <span class="font-normal text-gray-600 dark:text-gray-300">High Top (Lemon Yellow)</span>
      <span class="font-semibold text-gray-800 dark:text-gray-50">$60</span>
    </div>

<div class="flex gap-4 mt-4 px-4">
      <span class="sr-only">Colors available</span>

Related Examples

Product card

Simon Scheffer

3 years ago

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

JaxStone

3 years ago

49.2k
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
Product Page
Showcase for the product.

Prem..

4 years ago

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

Noob

3 years ago

24.8k
Product card

Oliver Hansen

3 years ago

14.5k
Product card for eCommerce website

Steven Kuhn

3 years ago

13.3k
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

2 years ago

20.1k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.1k
Product card

Oliver Hansen

3 years ago

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

Shariar Hasan

2 years ago

4k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.3k