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

1.4k

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