Back to Discover
Tailwind CSS Dashboard Layout Template

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50" x-data="{ sidebarOpen: false }">

  <!-- Sidebar -->
  <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" 
         class="fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0">

    <!-- Logo -->
    <div class="flex items-center justify-between h-16 px-6 border-b">
      <div class="flex items-center space-x-2">
        <ion-icon name="analytics" class="text-2xl text-blue-600"></ion-icon>
        <span class="text-xl font-semibold text-gray-800">Dashboard</span>
      </div>
      <button @click="sidebarOpen = false" class="lg:hidden text-gray-500 hover:text-gray-700">
        <ion-icon name="close" class="text-2xl"></ion-icon>
      </button>
    </div>

    <!-- Navigation -->
    <nav class="p-4 space-y-1">
      <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-700 bg-blue-50 rounded-lg">
        <ion-icon name="home" class="text-xl text-blue-600"></ion-icon>
        <span class="font-medium text-blue-600">Overview</span>
      </a>
      <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition">
        <ion-icon name="bar-chart" class="text-xl"></ion-icon>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition">
        <ion-icon name="people" class="text-xl"></ion-icon>
        <span>Users</span>
      </a>
      <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition">
        <ion-icon name="settings" class="text-xl"></ion-icon>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center space-x-3 px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition">
        <ion-icon name="document-text" class="text-xl"></ion-icon>
        <span>Reports</span>
      </a>
    </nav>

    <!-- User Profile -->
    <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
      <div class="flex items-center space-x-3 px-4 py-3">
        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
          <ion-icon name="person" class="text-xl text-blue-600"></ion-icon>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-800">John Doe</p>
          <p class="text-xs text-gray-500">Admin</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content -->
  <div class="lg:ml-64">

    <!-- Header -->
    <header class="bg-white shadow-sm sticky top-0 z-40">
      <div class="flex items-center justify-between h-16 px-6">
        <button @click="sidebarOpen = true" class="lg:hidden text-gray-500 hover:text-gray-700">
          <ion-icon name="menu" class="text-2xl"></ion-icon>
        </button>

        <div class="flex-1 max-w-2xl mx-4">
          <div class="relative">
            <ion-icon name="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></ion-icon>
            <input type="text" placeholder="Search..." 
                   class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
          </div>
        </div>

        <div class="flex items-center space-x-4">
          <button class="relative text-gray-500 hover:text-gray-700">
            <ion-icon name="notifications" class="text-2xl"></ion-icon>
            <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
          </button>
          <button class="text-gray-500 hover:text-gray-700">
            <ion-icon name="mail" class="text-2xl"></ion-icon>
          </button>
        </div>
      </div>
    </header>

    <!-- Page Content -->
    <main class="p-6">

      <!-- Stats Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 mb-1">Total Revenue</p>
              <p class="text-2xl font-semibold text-gray-800">$45,231</p>
            </div>
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
              <ion-icon name="cash" class="text-2xl text-blue-600"></ion-icon>
            </div>
          </div>
          <p class="text-sm text-green-600 mt-2">+12.5% from last month</p>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 mb-1">Total Users</p>
              <p class="text-2xl font-semibold text-gray-800">1,234</p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
              <ion-icon name="people" class="text-2xl text-green-600"></ion-icon>
            </div>
          </div>
          <p class="text-sm text-green-600 mt-2">+5.2% from last month</p>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 mb-1">Active Sessions</p>
              <p class="text-2xl font-semibold text-gray-800">892</p>
            </div>
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <ion-icon name="pulse" class="text-2xl text-purple-600"></ion-icon>
            </div>
          </div>
          <p class="text-sm text-green-600 mt-2">+8.1% from last month</p>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm text-gray-500 mb-1">Conversion Rate</p>
              <p class="text-2xl font-semibold text-gray-800">3.24%</p>
            </div>
            <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <ion-icon name="trending-up" class="text-2xl text-orange-600"></ion-icon>
            </div>
          </div>
          <p class="text-sm text-red-600 mt-2">-2.3% from last month</p>
        </div>
      </div>

      <!-- Content Grid -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        <!-- Recent Activity -->
        <div class="lg:col-span-2 bg-white rounded-lg shadow">
          <div class="p-6 border-b">
            <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
          </div>
          <div class="p-6">
            <div class="space-y-4">
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <ion-icon name="person-add" class="text-blue-600"></ion-icon>
                </div>
                <div class="flex-1">
                  <p class="text-sm text-gray-800 font-medium">New user registered</p>
                  <p class="text-xs text-gray-500">john.smith@example.com joined</p>
                  <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
                </div>
              </div>
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <ion-icon name="checkmark-circle" class="text-green-600"></ion-icon>
                </div>
                <div class="flex-1">
                  <p class="text-sm text-gray-800 font-medium">Order completed</p>
                  <p class="text-xs text-gray-500">Order #1234 has been delivered</p>
                  <p class="text-xs text-gray-400 mt-1">15 minutes ago</p>
                </div>
              </div>
              <div class="flex items-start space-x-4">
                <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
                  <ion-icon name="document" class="text-purple-600"></ion-icon>
                </div>
                <div class="flex-1">
                  <p class="text-sm text-gray-800 font-medium">Report generated</p>
                  <p class="text-xs text-gray-500">Monthly sales report is ready</p>
                  <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Quick Actions -->
        <div class="bg-white rounded-lg shadow">
          <div class="p-6 border-b">
            <h2 class="text-lg font-semibold text-gray-800">Quick Actions</h2>
          </div>
          <div class="p-6">
            <div class="space-y-3">
              <button class="w-full flex items-center justify-between px-4 py-3 bg-blue-50 hover:bg-blue-100 text-blue-700 rounded-lg transition">
                <span class="font-medium">New Project</span>
                <ion-icon name="add-circle" class="text-xl"></ion-icon>
              </button>
              <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 text-gray-700 rounded-lg transition">
                <span class="font-medium">Invite Team</span>
                <ion-icon name="person-add" class="text-xl"></ion-icon>
              </button>
              <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 text-gray-700 rounded-lg transition">
                <span class="font-medium">Upload File</span>
                <ion-icon name="cloud-upload" class="text-xl"></ion-icon>
              </button>
              <button class="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 text-gray-700 rounded-lg transition">
                <span class="font-medium">Export Data</span>
                <ion-icon name="download" class="text-xl"></ion-icon>
              </button>
            </div>
          </div>
        </div>

      </div>
    </main>
  </div>

  <!-- Overlay -->
  <div x-show="sidebarOpen" 
       @click="sidebarOpen = false"
       x-transition:enter="transition-opacity ease-linear duration-300"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition-opacity ease-linear duration-300"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       class="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden">
  </div>
Comments (0)

No comments yet. Be the first!