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 6 1

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

Detail Article

Alief Malik

1 month ago

61
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Abdul Baset Bappy

1 year ago

1.9k
Active Beauty Main Page

Maxim

1 year ago

1.8k
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

nejaa badr

1 year ago

3.7k
Health Tracker - Diet Calorie Management App
Health Tracker - Diet Calorie Management App

Tanvir Hasan Bappy (Tanvir)

9 months ago

610
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
Testimonial Section
A responsive, SEO-friendly testimonial section for Ab Nahid Agency clients

Abdul Jabbar Al Nahid

1 year ago

1.3k
Payment form

ORGIN_DREAMS

1 year ago

1.1k
Sticky fullpage pages / slides
Sticky full page

harinandana

11 months ago

1k
Interactive Game Flip Card – Pure HTML & CSS Component
An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k