Empty Wishlist UI

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

Other

Author JUGENDRA GANGWAR

Tailwind v3.4 17 3

Fork Fullscreen

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

<div class="text-center lg:text-left">
          <span class="inline-flex items-center gap-2 rounded-full border border-[#E4EADF] bg-[#F5F8F1] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-[#476653]">
            <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
              <path d="M20.8 8.8c0 5.2-8.8 11-8.8 11s-8.8-5.8-8.8-11A4.8 4.8 0 0 1 12 6.1a4.8 4.8 0 0 1 8.8 2.7Z" stroke-linejoin="round"/>
            </svg>
            Your personal collection
          </span>

<h1 class="mt-7 text-4xl font-semibold leading-[1.12] tracking-tight text-[#202A23] sm:text-5xl xl:text-6xl">
            A little space<br/>
            for things you'll
            <span class="font-serif italic text-[#65816A]">love.</span>
          </h1>

<p class="mx-auto mt-6 max-w-md text-sm leading-7 text-slate-500 sm:text-base lg:mx-0">
            Your wishlist is waiting for its first favourite. Save the pieces that catch your eye and keep everything you love in one place.
          </p>

<div class="mt-9 flex flex-col gap-3 sm:flex-row sm:justify-center lg:justify-start">
            <a href="#" class="group inline-flex items-center justify-center gap-3 rounded-xl bg-[#476653] px-7 py-4 text-sm font-semibold text-white shadow-[0_12px_26px_-12px_rgba(71,102,83,0.65)] transition duration-200 hover:-translate-y-0.5 hover:bg-[#385542] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#476653]/25">
              Discover favourites
              <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 transition-transform group-hover:translate-x-1" stroke="currentColor" stroke-width="1.8" 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-[#DFE5DB] bg-white px-7 py-4 text-sm font-semibold text-[#28382D] transition hover:border-[#476653]/40 hover:bg-[#F5F8F1] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#476653]/15">
              Explore new arrivals
            </a>
          </div>

<ul class="mt-11 flex flex-wrap items-center justify-center gap-x-6 gap-y-4 border-t border-[#E9EDE6] 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-[#65816A]" stroke="currentColor" stroke-width="1.7" aria-hidden="true">
                <path d="M20.8 8.8c0 5.2-8.8 11-8.8 11s-8.8-5.8-8.8-11A4.8 4.8 0 0 1 12 6.1a4.8 4.8 0 0 1 8.8 2.7Z" stroke-linejoin="round"/>
              </svg>
              Save what you love
            </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="M12 3v18m-9-9h18" stroke-linecap="round"/>
              </svg>
              Curate your style
            </li>
          </ul>
        </div>

<div class="absolute bottom-[8%] rounded-full bg-white/80 px-4 py-2 text-xs font-medium tracking-wide text-[#65816A] shadow-sm ring-1 ring-[#E3EADF]">
            A collection of your favourites
          </div>
        </div>
      </div>
    </section>

<p class="mt-5 text-center text-xs text-slate-400">
      Good things are worth saving.
    </p>
  </div>
</div>

Related Examples

Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Abdul Baset Bappy

1 year ago

1.4k
Responsive fullscreen youtube video

Anonymous

3 years ago

9.5k
Trend showcase

Anonymous

4 weeks ago

16
Visernic Brand Logo | Logo Vector
Official SVG logo of Visernic Limited—a digital solutions agency offering software development, IT consulting, cybersecurity, and digital marketing worldwide. This vector asset is fully scalable and optimized for fast web performance.

Visernic

2 months ago

270
Upvote downvote buttons

Lucas Martinez

3 years ago

12.6k
admin panel

Anonymous

2 years ago

3.5k
Modern Architecture Blog & News Grid UI Layout
A clean, minimal, and fully responsive Blog/News grid layout built with Tailwind CSS. Features a 2-column article grid with fixed title alignment, clean pagination, and a sticky sidebar with categories & CTA widget. Perfect for architectural firms, magazine portals, and CMS integrations.

Alief Malik

2 months ago

190
Homepage event

Anonymous

1 year ago

1.3k
Font testing
comparing old fonts to tailwind with clamp sizing

Sherry Lynne

3 months ago

389
background animation
background animation

Anonymous

11 months ago

1.2k
Full Page loading overlay

Bunny

3 years ago

12.9k