Home
Ameth Galarcio
Card-Product

Card-Product

Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

This tailwind example is contributed by Ameth Galarcio, on 16-Jul-2024. Component is made with Tailwind CSS v3. It is responsive.

Card Widget

Author Ameth Galarcio

1.6k

4

Fork Fullscreen

<div class="mx-4">
  <div
    class="px-4 py-4 flex bg-white rounded-lg drop-shadow overflow-hidden w-full transform transition-transform border-gray-200 border items-center">
    <img class="aspect-square h-20 md:h-40 object-cover rounded-lg"
     src="https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c25lYWtlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="product image"  />
    <div class="p-2 md:p-6 h-full flex flex-col md:justify-between">
      <h3 class="text-sm md:text-md font-bold md:mb-2 uppercase text-gray-700 leading-4">
        Nike Air MX Super 2500 - Red
      </h3>
      <p class="pb-0 md:pb-4">
        <span class="text-lg md:text-3xl font-bold text-slate-900">$449</span>
        <span class="text-xs md:text-sm text-slate-900 line-through">$699</span>
      </p>

<a href="#"
        class="flex items-center justify-center rounded-md bg-slate-900 px-5 py-2.5 text-center  text-xs md:text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 w-4 md:w-6 aspect-square" fill="none" viewBox="0 0 24 24"
          stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        Add to cart
      </a>
    </div>

</div>
</div>

Related Examples

Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

8 months ago

1.6k
Contact us form with map
Contact us form with map

Author:
Chithira Kumar M

1 year ago

10.6k
Code Block with Copy Button
this example uses clipboard.js to copy the code

Author:
Alok

1 year ago

17.3k
Image card with overlay text overlay

Author:
Santos78

2 years ago

28.9k
Labs card
Lab item list card

Author:
Sedat Kumcu

5 months ago

1.1k
Blog post cards
responsive blog post cards

Author:
Mr Robot

2 years ago

11k
Confirmation model

Author:
Mr Robot

2 years ago

12.5k
Pricing section Lima
Pricing section Lima with responsive design

Author:
Mubashir hussain

1 year ago

1.7k
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

2 years ago

11.2k
Music Player

Author:
Abhijit Sen

2 years ago

16k
Feature Section Cards

Author:
Akram Khan

8 months ago

1.4k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Author:
Ragnar lodbrok

1 year ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1