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

1.1k

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

10 months ago

1.6k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

8 months ago

1.3k
Best incamas to date

Author:
ORGIN_DREAMS

8 months ago

878
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 months ago

437
Card
Card

Author:
Aman kumar

1 year ago

1.6k
Profile1

Author:
pablitodgb

7 months ago

359
cards
html , css ,

Author:
Hacker Development

8 months ago

843
Game Live Score
A live score game layout design perfect for your live scoring application

Author:
Diavox Jerome Soriano

11 months ago

973
Blog Card

Author:
Md. Tofayel islam

1 year ago

1.9k
Info Card
info card with description

Author:
Prashant

3 years ago

12.9k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

1 year ago

2.8k
Sign up form

Author:
Rajesh Maheshwari

10 months ago

969

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components