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

705

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