Home
Maxim
Product card for e-commerce

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 CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card

Card Product

Author Maxim

1.2k

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