Home
Shariar Hasan
Card Component

Card Component

A Simple Card Component with full responsiveness and dark mode supported

This tailwind example is contributed by Shariar Hasan, on 29-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Card Product

Author Shariar Hasan

Fork Fullscreen

<div
  class="min-h-32 max-w-[200px] dark:bg-gray-900 dark:text-gray-100 border dark:border-0 mx-auto relative rounded-md hover:shadow-xl cursor-pointer duration-200">
  <span class="bg-blue-600 text-white px-2 py-1 absolute top-0 right-0 text-xs  md:tex t-sm rounded-bl-md">5.5 % discount</span>
  <div class="overflow-hidden p-2 rounded-md">
    <img alt="Iphone 14+" loading="lazy" class="" src="https://media.istockphoto.com/id/1190447864/photo/apple-iphone-11-pro-gray-smartphone.jpg?s=612x612&w=0&k=20&c=zETLJeguLoTEFBNKPl1vjPY1lvPW1uM6GPpyiMSvsC0=" style="color: transparent;">
    
  </div>
  <div class="px-2 py-3">
    <h5 class="text-base font-semibold text-center">Iphone 14+</h5>
    <p class="text-center text-xs font-semibold flex justify-center gap-2 my-2"><del
        class="text-gray-500">20000$</del><span>189000$</span></p>
    <div class="text-xs flex justify-between flex-wrap mt-1">
      <button class="flex items-center px-2 py-1  gap-x-2 bg-blue-600 border-2 border-blue-600 hover:bg-transparent rounded text-white hover:text-inherit">Add to cart <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM403.029 192H360v-60c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v60h-43.029c-10.691 0-16.045 12.926-8.485 20.485l67.029 67.029c4.686 4.686 12.284 4.686 16.971 0l67.029-67.029c7.559-7.559 2.205-20.485-8.486-20.485z"></path></svg></button><button class="flex items-center px-2 py-1  gap-x-2 bg-blue-600 border-2 border-blue-600 hover:bg-transparent rounded text-white hover:text-inherit">View <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
    </div>
  </div>
</div>

Related Examples

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

1 year ago

43.7k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

10.7k
Product card

Author:
Simon Scheffer

2 years ago

26.1k
Product card

Author:
Oliver Hansen

2 years ago

8.5k
Product card

Author:
Oliver Hansen

2 years ago

11.9k
Product card
sleek and modern product card

Author:
OmKar Mehta

9 months ago

3.8k
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

7 months ago

1k
Card-Product
Item or card to show products

Author:
Ameth Galarcio

7 months ago

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

Author:
Ameth Galarcio

5 months ago

1.4k
Watch Card
Watch Cards

Author:
Anonymous

3 months ago

724
Feature Card

Author:
Md. Tofayel islam

3 months ago

443
Card
amazing card

Author:
Cristian

2 months ago

398

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components