Empty Shopping Cart

This tailwind example is contributed by JUGENDRA GANGWAR, on 14-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Shopping cart

Author JUGENDRA GANGWAR

Tailwind v3.4 10 1

Fork Fullscreen

<div class="min-h-screen bg-[#F4F6F5] px-4 py-6 sm:px-8 sm:py-10">
  <div class="mx-auto max-w-6xl">
    <nav aria-label="Breadcrumb" class="mb-6 flex items-center gap-2 text-xs font-medium text-slate-400 sm:text-sm">
      <a href="#" class="rounded transition hover:text-[#0E5A4F] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#0E5A4F]/40">Home</a>
      <svg viewBox="0 0 20 20" fill="none" class="h-3.5 w-3.5" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
        <path d="m7 4 6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="text-slate-700">Shopping cart</span>
    </nav>

<div class="text-center lg:text-left">
          <h1 class="text-3xl font-semibold leading-[1.1] tracking-tight text-[#12201D] sm:text-4xl lg:text-5xl">
            Your cart is empty.<br class="hidden sm:block"/>
            <span class="text-[#0E5A4F]">Start with something you'll keep.</span>
          </h1>
          <p class="mx-auto mt-6 max-w-md text-sm leading-7 text-slate-500 sm:text-base lg:mx-0">
            Items you add will show up here, ready for checkout. Browse the collection to find your next favourite.
          </p>

<div class="mt-9 flex flex-col items-stretch gap-3 sm:flex-row sm:justify-center lg:justify-start">
            <a href="#" class="group inline-flex items-center justify-center gap-2 rounded-xl bg-[#0E5A4F] px-7 py-3.5 text-sm font-semibold text-white shadow-[0_12px_28px_-12px_rgba(14,90,79,0.7)] transition duration-200 hover:bg-[#0B4A41] focus:outline-none focus-visible:ring-4 focus-visible:ring-[#0E5A4F]/25">
              Shop the collection
              <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path d="M5 12h14m-6-6 6 6-6 6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
            <a href="#" class="inline-flex items-center justify-center rounded-xl border border-[#D5DEDA] bg-white px-7 py-3.5 text-sm font-medium text-[#12201D] transition hover:border-[#0E5A4F]/40 hover:bg-[#F1F7F5] focus:outline-none focus-visible:ring-4 focus-visible:ring-[#0E5A4F]/15">
              View bestsellers
            </a>
          </div>

<ul class="mt-12 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 border-t border-[#E8EEEB] pt-7 text-xs font-medium text-slate-500 lg:justify-start">
            <li class="flex items-center gap-2">
              <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 text-[#B8934A]" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                <path d="M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3Z" stroke-linejoin="round"/>
                <path d="m9 12 2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Secure checkout
            </li>
            <li class="flex items-center gap-2">
              <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 text-[#B8934A]" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                <path d="M3 7h11v10H3zM14 10h4l3 3v4h-7z" stroke-linejoin="round"/>
                <circle cx="7" cy="19" r="1.5"/><circle cx="18" cy="19" r="1.5"/>
              </svg>
              Reliable delivery
            </li>
            <li class="flex items-center gap-2">
              <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 text-[#B8934A]" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                <path d="M20 11a8 8 0 1 1-2.3-5.6M20 4v6h-6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              Easy returns
            </li>
          </ul>
        </div>

<div class="relative mx-auto flex h-64 w-64 items-center justify-center sm:h-80 sm:w-80" aria-hidden="true">
          <div class="absolute inset-0 rounded-full border border-[#DCE6E2]"></div>
          <div class="absolute inset-6 rounded-full border border-[#E8EFEC]"></div>
          <div class="absolute inset-12 rounded-full bg-gradient-to-br from-[#E4F3EE] to-[#F7F1E0]"></div>
          <div class="absolute inset-12 rounded-full ring-1 ring-inset ring-white"></div>

</div>
    </section>
  </div>
</div>

Related Examples

Best incamas to date

ORGIN_DREAMS

1 year ago

1.6k
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

mohit kulkarni

1 year ago

1.5k
shopp of shoes
shopp style

Nezerwa Debora

1 year ago

1.6k
Shoping Cart Popup

ABDO-SY

1 year ago

1.7k
Checkout page template

JaxStone

3 years ago

24.7k
Shopping Cart
Shopping Cart

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.8k
Shopping cart

Ron Hicks

3 years ago

16.7k
clothes
shopp clothes

Nirere Esther

1 year ago

1.4k
Shoping cart

Moriba Traore

3 years ago

13.9k
Shopping cart page
this is the responsible shopping cart page

Anonymous

2 years ago

8.8k
shopping
Online shopping will help us find the things we want using our phone or computer and have them delivered to us.

Nishimwe Jeanine

1 year ago

1.3k
bonimator dash board
bonimator dash board

Bonimater

1 year ago

908