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 v3.4. It is responsive.

Card Widget

Author Ameth Galarcio

Tailwind v3.4 3.4k 11

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>

</div>
</div>

Related Examples

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

Ameth Galarcio

2 years ago

3.1k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

dev-fab250

1 year ago

2.4k
card section neon
card section neon

Omer fils ELENGA

9 months ago

1.3k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

793
Trending Creators
Trending Creators

Omer fils ELENGA

1 month ago

10
3d card
the Best 3D card with tailwind css

irahoza daniel

1 year ago

1.5k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Jerome Soriano

2 years ago

2.7k
Card with Dark Mode
For blog post and e-commerce websites

OmKar Mehta

2 years ago

3k
Voucher Card

Adriano Monecchi

11 months ago

609
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Feature cards with icons on top

Manon Daniel

3 years ago

18.4k
Fancy blog post card

Mr Robot

3 years ago

13.5k