Home
Anum Shahana
Product card

Product card

This tailwind example is contributed by Anum Shahana, on 11-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card

Card Pricing Product

Author Anum Shahana

913

Fork Fullscreen

<div class="flex item center justify-center mt-20">
   
       <div class="w-[221px] bg-white">
        
        <img
          src="https://images.unsplash.com/photo-1665473052568-e36bc84cca4c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8amFtfGVufDB8MHx8fDE3MzM4OTY2MzR8MA&ixlib=rb-4.0.3&q=80&w=1080"
          alt="Product"
          class="w-full md:w-[221px] h-40 md:h-[110px] object-cover  mb-2"
        />
         
        <div class="flex items-center justify-between">
          <h2 class="text-lg md:text-[14px] font-bold text-gray-800 ">
            Jam
          </h2>
          <div class="flex items-center space-x-2">
             
            <div class="flex">
              <span class="text-[#155528] text-base">&#9733;</span>
              <span class="text-[#155528] text-base">&#9733;</span>
              <span class="text-[#155528] text-base">&#9733;</span>
              <span class="text-[#155528] text-base">&#9733;</span>
              <span class="text-gray-400 text-base">&#9734;</span>
            </div>
             
            <span class=" text-[10px] text-[#19253C] font-bold">
              4.5(278)
            </span>
          </div>
        </div>
         
        <p class="text-sm md:text-[14px]  ">Minimum Order Quantity (10)</p>
        <div class="flex items-center justify-between">
          <p class="text-sm md:text-[14px]  ">Stock: 180,000t</p>
           
          <button className="text-sm md:text-[10px] w-[83px] h-[14px] py-1 rounded-lg text-center font-bold  flex items-center justify-center">
            USD 5
          </button>
        </div>
      </div>
      </div>

Related Examples

Profile Card
User Profile Card with Name and Location

Author:
Anubhav Ranjan

7 months ago

1.2k
Article-Post Preview card

Author:
Prashant

2 years ago

9.2k
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

10.7k
Card profile
profile card

Author:
Aman kumar

1 year ago

2.2k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

4 months ago

666
Hotel rooms
A simple room overview

Author:
Matti

3 months ago

533
Simple Card with Image
Horizontal card

Author:
Prem..

2 years ago

8.5k
Tailwind product gallery

Author:
JaxStone

2 years ago

24.9k
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

1 year ago

6k
Profit Card
Profit card with deatils

Author:
dongol heart

4 months ago

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

Author:
Ameth Galarcio

9 months ago

1.7k
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

1 year ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components