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

596

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

4 months ago

860
Shop Now Amazon x
Product cards

Author:
ORGIN_DREAMS

1 month ago

252
Best incamas to date

Author:
ORGIN_DREAMS

1 month ago

218
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

11.1k
Battery and signal
Battery and signal bar component

Author:
ardianhu

6 months ago

662
Info Card

Author:
Prem..

2 years ago

18.7k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

2 months ago

330
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Author:
Maxim

1 year ago

11.6k
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

3 months ago

556
File Upload

Author:
Rajesh Maheshwari

4 months ago

564
Minimal Info cards

Author:
Gopi Yadav

2 years ago

10.2k
Testimonial card

Author:
Leon Bachmann

2 years ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components