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

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

4 months ago

1.2k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

4 months ago

402
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

8 months ago

1.3k
Speedometer Example
Internet speed meter, gauge meter

Author:
Brandon D

3 years ago

13.9k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

6 months ago

725
Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
farisubuntu

1 year ago

2.1k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Author:
Quentin Rivers

11 months ago

5.3k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

9.8k
Tour package card
This card could be used for featuring a product, service, or blog post:

Author:
Henrik R.

1 year ago

2.1k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k
Brand Grid with Hover Effect

Author:
ariaw

6 months ago

888

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components