Dashboard 2

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

Tailwind v3.4 9

<div class="flex h-screen bg-slate-50 font-sans antialiased text-slate-800">
  
  
  <aside class="w-64 bg-slate-900 text-slate-200 flex flex-col justify-between shadow-xl flex-shrink-0 border-r border-slate-950">
    <div>
      
      <div class="h-16 flex items-center bg-slate-950 border-b border-slate-800 px-6">
        <span class="text-lg font-bold tracking-wider text-white flex items-center gap-2.5">
          <svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
          User Dashboard
        </span>
      </div>

<nav class="p-4 space-y-1">
        
        <a
          routerLink="/user"
          routerLinkActive="bg-indigo-600 text-white shadow-md shadow-indigo-950/50"
          [routerLinkActiveOptions]="{ exact: true }"
          class="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-100 transition-all duration-200 text-left text-sm font-medium group"
        >
          <svg class="w-5 h-5 flex-shrink-0 transition-colors group-hover:text-slate-100" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.053.213-7.5.632V21m15 0h-15"></path>
          </svg>
          Browse Clinics
        </a>

<a
          routerLink="/user/myAppointment"
          routerLinkActive="bg-indigo-600 text-white shadow-md shadow-indigo-950/50"
          class="w-full flex items-center gap-3 px-4 py-3 rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-100 transition-all duration-200 text-left text-sm font-medium group"
        >
          <svg class="w-5 h-5 flex-shrink-0 transition-colors group-hover:text-slate-100" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"></path>
          </svg>
          My Appointments
        </a>
      </nav>
    </div>

<div class="p-4 border-t border-slate-800 bg-slate-950/20">
      <button
        (click)="onLogout()"
        class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-rose-400 hover:bg-rose-950/30 hover:text-rose-300 rounded-lg transition-all duration-200 text-left font-medium group"
      >
        <svg class="w-5 h-5 flex-shrink-0 text-rose-400/80 group-hover:text-rose-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"></path>
        </svg>
        Logout
      </button>
    </div>
  </aside>

<div class="flex-1 flex flex-col overflow-hidden">
    
    <header class="h-16 bg-white shadow-sm flex items-center justify-between px-8 border-b border-slate-200 flex-shrink-0">
      <h1 class="text-base font-semibold text-slate-900 tracking-tight">Patient Portal</h1>
      <div class="flex items-center gap-3 border-l border-slate-100 pl-4">
        <span class="text-xs font-medium text-slate-500 uppercase tracking-wider">{{ loginUserName }}</span>
        <div class="w-8 h-8 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 flex items-center justify-center font-bold text-xs shadow-inner select-none">
          {{ loginUserName?.substring(0, 2) | uppercase }}
        </div>
      </div>
    </header>

<main class="flex-1 overflow-x-hidden overflow-y-auto p-8 bg-slate-50">
      <router-outlet></router-outlet>
    </main>
  </div>
</div>

Related Examples

tab4
table

Anonymous

3 weeks ago

17
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Hamza Atig

1 year ago

1.6k
Clean Component Sharing Hub (Landing State)
A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

Hamza Atig

9 months ago

888
3D Count downer

Hasan AlDoy (McDoy)

5 months ago

321
Life Tree
by salvator

Baraka Salvator

1 year ago

1.3k
Sticky fullpage pages / slides

Laurits

3 years ago

16.6k
Prescription

Anonymous

2 weeks ago

8
GenzeStack Dumpy - Interactive Login Page with Mascot
A playful, fully responsive Tailwind CSS login component featuring "Dumpy" the GenzeStack mascot with interactive status tabs, custom SVG graphics, and dark mode support.

Sayista Yazdani

5 days ago

128
info form

Anonymous

2 weeks ago

91
Pricing

Anonymous

1 week ago

15
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Abdul Baset Bappy

1 year ago

1.5k
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Muhammad Umair Arshad

1 year ago

2k