Product Card Component for Ecommerce Websites [React + Tailwind]

The product card is made with Tailwind CSS and is perfect for your ecommerce website. It is easy to customize and works well on all devices. Use it to show your products in a better way and make your website look great!

After 4 variants of blog cards, here we have a product card for an ecommerce app.

This component is best for tech products with transparent background images.

Features of the Product Card Component

Discount Badge: Display discounts prominently for promotional offers.
Transparent Images: Ideal for products with transparent backgrounds.
Product Info: View more details with a click of the info icon.
Add-to-Cart Button: Add items to the cart from the card.

Product Card Preview

tech product card preview

Tailwind Product Card Component Code

In below code we show how to create a reusable and interactive product card component. This component supports key ecommerce features, including displaying discounts and adding products to the cart.


1import { BadgeInfo } from 'lucide-react'
2
3export interface ProductType {
4  title: string
5  image: string
6  discount?: number
7  discountedPrice?: number
8  price: number
9}
10
11interface PropsType {
12  product: ProductType
13}
14
15const ProductCard: React.FC<PropsType> = ({ product }) => {
16  const { title, image, discount, discountedPrice, price } = product
17
18  const handleAddToCart = () => {
19    console.log(`Add ${title} to cart`)
20  }
21
22  const handleShowProductInfo = () => {
23    console.log(`View details for ${title}`)
24  }
25
26  return (
27    <div className="rounded-2xl border border-blue-100 bg-white p-[6px]">
28      <div className="relative flex h-[240px] w-full items-center justify-center rounded-xl bg-[#F6DAB0] p-4">
29        <img
30          src={image}
31          alt={`${title} image`}
32          className="max-h-full max-w-full object-contain"
33        />
34        {discount && (
35          <span className="absolute left-2 top-2 rounded-md bg-[#FB991C] px-2 py-1 text-sm text-white">
36            -{discount}%
37          </span>
38        )}
39      </div>
40
41      <div className="p-2 pt-0">
42        <h3 className="my-5 line-clamp-2 text-sm font-medium sm:h-12">
43          {title}
44        </h3>
45
46        <div className="mb-8 flex items-center">
47          <span className="mr-2 text-lg font-medium text-[#FB991C]">
48            ${price}
49          </span>
50          {discountedPrice && (
51            <span className="font-medium text-[#C9C9C9] line-through">
52              ${discountedPrice}
53            </span>
54          )}
55        </div>
56
57        <div className="flex gap-[10px]">
58          <button
59            onClick={handleShowProductInfo}
60            className="rounded-md bg-blue-50 p-2 hover:bg-[#e1e2e6] focus:outline-[#e1e2e6]"
61            aria-label={`View details of ${title}`}
62          >
63            <BadgeInfo color="#C9C9C9" />
64          </button>
65          <button
66            onClick={handleAddToCart}
67            className="w-full rounded-md bg-blue-50 py-[6px] font-medium text-[#1C7690] hover:bg-[#e1e2e6] focus:outline-[#e1e2e6]"
68          >
69            Add to cart
70          </button>
71        </div>
72      </div>
73    </div>
74  )
75}
76
77export default ProductCard

Tailwind Product List Component

Product List Preview

Product List component preview

To display multiple products, the ProductList component utilizes the ProductCard component.

From the above product card component, we exported ProductType and using that type here to avoid repetition.

In this product list component, we added responsiveness for the product list. This component is also reusable and can be used in multiple places in the app.


1import ProductCard, { ProductType } from './TechProductCard'
2
3const ProductList = ({ products }: { products: ProductType[] }) => {
4  return (
5    <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 md:grid-cols-3 md:gap-7 lg:grid-cols-4">
6      {products.map((product, index) => (
7        <ProductCard key={index} product={product} />
8      ))}
9    </div>
10  )
11}
12
13export default ProductList

Usage in the Parent/App.tsx Component

Here's how you can use the ProductList component into your app. You can also replace the static products array data with API data.


1import Footer from './components/Footer/SimpleFooter'
2import Navbar from './components/Navbar/Navbar'
3import Newsletter from './components/Newsletter/V3'
4import ProductList from './components/ProductCard/ProductList'
5
6const products = [
7  {
8    title: 'Cougar DarkBlader-G ARGB Full Tower Case',
9    image:
10      'https://ik.imagekit.io/cpnw7c0xpe/Random/tower%20case.png?updatedAt=1734089976127',
11    price: 540,
12    discountedPrice: 500,
13    discount: 20,
14  },
15  {
16    title: 'HP Envy 13-BA0071TX Laptop - 10th Gen Ci7',
17    image:
18      'https://ik.imagekit.io/cpnw7c0xpe/Random/laptop.png?updatedAt=1734089976153',
19    price: 1200,
20    discountedPrice: 1000,
21    discount: 10,
22  },
23  {
24    title: 'Logitech Mechanical Keyboard',
25    image:
26      'https://ik.imagekit.io/cpnw7c0xpe/Random/keyboard.png?updatedAt=1734089976123',
27    price: 200,
28  },
29  {
30    title: 'Cougar Panzer EVO RGB Gaming Case',
31    image:
32      'https://ik.imagekit.io/cpnw7c0xpe/Random/gaming%20case.png?updatedAt=1734089976154',
33    price: 1999,
34    discountedPrice: 1699,
35    discount: 15,
36  },
37]
38
39const App = () => {
40  return (
41    <>
42      <Navbar />
43      <div className="mx-auto max-w-7xl px-4">
44        <section className="mt-12">
45          <h2 className="mb-5 text-[28px] font-bold text-black">
46            Featured Products
47          </h2>
48          <ProductList products={products} />
49        </section>
50        <Newsletter />
51      </div>
52      <Footer />
53    </>
54  )
55}
56
57export default App

In the above code, you can find additional components like the Navbar, Footer, and Newsletter, all designed to enhance the overall layout of your website.