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

2.6k

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

Author:
Ameth Galarcio

1 year ago

2.6k
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.

Author:
dev-fab250

8 months ago

1.7k
Coard Component 299b
un

Author:
Kaung Htet Min

3 months ago

362
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

3k
Total balance overview

Author:
Raul antonio de la cruz hernandez

2 months ago

323
credit card checkout

Author:
Antony

1 year ago

3.5k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

9 months ago

713
Product card

Author:
Oliver Hansen

3 years ago

13.9k
less is more
less is more by salvator

Author:
Baraka Salvator

7 months ago

1k
Tailwind flex Hero
Show Image with flex image gallery

Author:
Riaz Uddin Masum

2 weeks ago

62
medical care
It will help us get medical care quickly using a card and make it possible for all of us, Rwandans and other people in other countries, to have a better life.

Author:
Nishimwe Jeanine

8 months ago

393
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components