Home
ABDO-SY
Shoping Cart Popup

Shoping Cart Popup

This tailwind example is contributed by ABDO-SY, on 08-Mar-2025. Component is made with Tailwind CSS v3. It supports dark mode.

Card Shopping cart

Author ABDO-SY

946

Fork Fullscreen

<section class=" w-full h-[700px] relative bg-white dark:bg-[#0A2025] ">
  <div class="bg-white flex flex-col h-full absolute right-0 p-10 w-[450px]">
    <div class="flex items-center mb-3 justify-between ">
      <h2 class="text-[#191919] text-xl font-medium leading-[30px]">Shopping Card (2)</h2><svg width="45" height="45"
        viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="22.5" cy="22.5" r="22.5" fill="white"></circle>
        <path d="M28.75 16.25L16.25 28.75" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round"
          stroke-linejoin="round"></path>
        <path d="M16.25 16.25L28.75 28.75" stroke="#1A1A1A" stroke-width="1.5" stroke-linecap="round"
          stroke-linejoin="round"></path>
      </svg>
    </div>
    <div class="flex gap-2 mb-6 items-center"><img width="120" height="100" src="https://iili.io/3FqLBsI.png" alt="">
      <div>
        <h3 class="w-[216px]   text-[#191919] text-sm font-normal  leading-[21px]">Fresh Indian Orange</h3>
        <p>
          <span class="relative justify-start text-[#7f7f7f] text-sm font-normal  leading-[21px]">1 kg x</span><span class="relative justify-start text-[#191919] text-sm font-semibold  leading-[16.80px]"> 12.00</span>
        </p>
      </div><svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_629_6652)">
          <path
            d="M12 23C18.0748 23 23 18.0748 23 12C23 5.92525 18.0748 1 12 1C5.92525 1 1 5.92525 1 12C1 18.0748 5.92525 23 12 23Z"
            stroke="#CCCCCC" stroke-miterlimit="10"></path>
          <path d="M16 8L8 16" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          </path>
          <path d="M16 16L8 8" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          </path>
        </g>
        <defs>
          <clipPath id="clip0_629_6652">
            <rect width="24" height="24" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div class="flex  gap-2 mb-6 items-center"><img width="120" height="100" src="https://iili.io/3FqLBsI.png" alt="">
      <div>
        <h3 class="w-[216px]   text-[#191919] text-sm font-normal  leading-[21px]">Fresh Indian Orange</h3>
        <p>
          <span class="relative justify-start text-[#7f7f7f] text-sm font-normal  leading-[21px]">1 kg x</span><span class="relative justify-start text-[#191919] text-sm font-semibold  leading-[16.80px]"> 12.00</span>
        </p>
      </div><svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_629_6652)">
          <path
            d="M12 23C18.0748 23 23 18.0748 23 12C23 5.92525 18.0748 1 12 1C5.92525 1 1 5.92525 1 12C1 18.0748 5.92525 23 12 23Z"
            stroke="#CCCCCC" stroke-miterlimit="10"></path>
          <path d="M16 8L8 16" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          </path>
          <path d="M16 16L8 8" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          </path>
        </g>
        <defs>
          <clipPath id="clip0_629_6652">
            <rect width="24" height="24" fill="white"></rect>
          </clipPath>
        </defs>
      </svg>
    </div>
    <div class="mt-auto">
      <div class=" py-6 bg-white flex justify-between items-center">
        <span class="relative justify-start text-[#191919] text-base font-normal  leading-normal">2 Product</span><span class="relative justify-start text-[#191919] text-base font-semibold  leading-tight">$26.00</span>
      </div>
      <button class="w-full px-10 py-4 bg-[#00b206] rounded-[43px]     text-white text-base font-semibold  leading-tight">Checkout</button><button class="w-[376px] mt-3 px-10 py-4 bg-[#56ac59]/10 rounded-[43px]   text-[#00b206] text-base font-semibold  leading-tight">Go To Cart</button>
    </div>
  </div>
</section>

Related Examples

Shopping Cart -Card

Author:
ABDO-SY

8 months ago

1.4k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

5 months ago

1k
Best incamas to date

Author:
ORGIN_DREAMS

5 months ago

612
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

2 weeks ago

119
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

1 week ago

18
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.7k
Info card

Author:
Laurits

2 years ago

10.7k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2k
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

3 years ago

13.1k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

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

1 year ago

3.3k
Image cards

Author:
Reuben Enahoro

11 months ago

1.7k
Chats Message Screen in neomorphism
light/dark chat screen

Author:
Akram Khan

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components