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

929

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

7 months ago

1.4k
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

5 months ago

987
Best incamas to date

Author:
ORGIN_DREAMS

5 months ago

544
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

119
Customer testimonial card
Responsive user testimonial card with image

Author:
Arya

3 years ago

11.8k
Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

4 months ago

171
Simple card layout with image

Author:
Leon Bachmann

2 years ago

10.7k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

8 months ago

2k
component

Author:
pablitodgb

4 months ago

569
File Upload

Author:
Rajesh Maheshwari

8 months ago

927
Feature Highlights cards

Author:
Carla Hoffman

1 year ago

2.4k
cards ecommerce
this cards have the best animation

Author:
ishimwe shadad

5 months ago

957

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components