Product card for e-commerce

A responsive product card for e-commerce, displaying product image, country flag, volume, name, and price, with hover effects and a clean layout.

This tailwind example is contributed by Maxim, on 13-Nov-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product

Author Maxim

Tailwind v3.4 2.2k 4

Fork Fullscreen

<div class="grid gap-2 grid-cols-2 sm:grid-cols-2 lg:gap-r lg:grid-cols-4">
  <div class="flex flex-col justify-between p-4 bg-white border border-stone-300 rounded-lg min-h-full relative">
    <span class="absolute top-0 left-0 mt-4 ml-4">
			<img class="w-5 h-5" src="http://lqrs.com/site/templates/images/flags/ireland.svg">
		</span>
    <span class="absolute top-12 left-0 ml-4"></span>
    <span class="absolute top-0 right-0 mt-3 mr-4">
			<span class="bg-slate-100 text-slate-700 text-xs font-medium px-2.5 py-1 rounded">750ml</span>
    </span>
    <a href="https://lqrs.com/brands/bushmills/">
      <img class="p-8 rounded-t-lg" src="http://lqrs.uk/site/assets/files/1508/bushmills_black_bush_irish_whiskey.0x300.jpeg" alt="Bushmills Black Bush Irish Whiskey">
    </a>
    <div class="flex-grow mb-5">
      <a href="https://lqrs.com/brands/bushmills/">
        <h5 class="text-sm sm:text-lg leading-5 sm:leading-6 font-medium text-stone-900">Bushmills Black Bush Irish
          Whiskey</h5>
      </a>
    </div>
    <div class="flex items-center justify-between">
      <span class="text-2xl font-bold text-stone-900">£38.50</span>
    </div>
  </div>
  <div class="flex flex-col justify-between p-4 bg-white border border-stone-300 rounded-lg min-h-full relative">
    <span class="absolute top-0 left-0 mt-4 ml-4">
			<img class="w-5 h-5" src="http://lqrs.com/site/templates/images/flags/ireland.svg">
		</span>
    <span class="absolute top-12 left-0 ml-4"></span>
    <span class="absolute top-0 right-0 mt-3 mr-4">
			<span class="bg-slate-100 text-slate-700 text-xs font-medium px-2.5 py-1 rounded">750ml</span>
    </span>
    <a href="https://lqrs.com/brands/bushmills/">
      <img class="p-8 rounded-t-lg" src="http://lqrs.uk/site/assets/files/1508/bushmills_black_bush_irish_whiskey.0x300.jpeg" alt="Bushmills Black Bush Irish Whiskey">
    </a>
    <div class="flex-grow mb-5">
      <a href="https://lqrs.com/brands/bushmills/">
        <h5 class="text-sm sm:text-lg leading-5 sm:leading-6 font-medium text-stone-900">Bushmills Black Bush Irish
          Whiskey</h5>
      </a>
    </div>
    <div class="flex items-center justify-between">
      <span class="text-2xl font-bold text-stone-900">£38.50</span>
    </div>
  </div>
</div>

Related Examples

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Product card

Simon Scheffer

3 years ago

32.5k
Product card

Oliver Hansen

3 years ago

10.8k
Product card

Oliver Hansen

3 years ago

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

Shariar Hasan

2 years ago

4.1k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.5k
Minimal Card
This is awesome looking card

Shaik Sameer Basha

2 years ago

3.4k
Card-Product
Item or card to show products

Ameth Galarcio

2 years ago

5k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.2k
Watch Card
Watch Cards

Anonymous

2 years ago

2.9k
Feature Card

Md. Tofayel islam

2 years ago

2.2k
Card
amazing card

Cristian

1 year ago

2.5k