Dashboard 1

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

Tailwind v3.4 6

<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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
          </svg>
          Admin Portal
        </span>
      </div>

<nav class="p-4 space-y-1">
        
        <a
          routerLink="/admin"
          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>
          Clinic Management
        </a>

<a
          routerLink="/admin/doctors"
          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="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.118a7.5 7.5 0 0115 0H4.5z"></path>
          </svg>
          Doctor Management
        </a>

<a
          routerLink="/admin/appointments"
          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>
          Appointment Management
        </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">Management Dashboard</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">Administrator</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">
          AD
        </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

machine
tell you how your MAC pc work

gidy

10 months ago

750
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Ayyamperumal S

1 year ago

2.9k
3D Count downer

Hasan AlDoy (McDoy)

5 months ago

321
background animation
background animation

Anonymous

3 years ago

53.1k
background animation
background animation

Jayendra Madara

2 years ago

4k
Organization Hierarchy list

Anonymous

3 years ago

9.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
Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
ForK blocks animations
ForK blocks animations

Yor Rodriguez

1 year ago

2.4k
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Anonymous

1 year ago

1.2k
Sticky fullpage pages / slides
Sticky full page

harinandana

11 months ago

1k