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

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

5 months ago

1.3k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

168
Card
Jobs recommended for you LinkedIn Clone

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

6 months ago

848
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

1.9k
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

Author:
CodewithFaraz

1 month ago

108
Detect Screen Breakpoints with Tailwind CSS

Author:
Prajwal Hallale

3 years ago

8.5k
Horizontal card with image

Author:
Amit Pachange

3 years ago

14.6k
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

9 months ago

1.2k
card Alert - icons - glass

Author:
ABDO-SY

8 months ago

738
Code card with copy Button
this example uses clipboard.js to copy the code

Author:
Joost Hietbrink

7 months ago

647
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components