admin panel UI

Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

This tailwind example is contributed by Lekhraj Ghimire, on 18-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Admin Dashboard, User dashboard,Front page

Footer Navigations Other Dashboard Navbar Landing Page

Author Lekhraj Ghimire

Tailwind v3.4 2.4k 8

Fork Fullscreen

<div class="flex min-h-screen bg-gray-100">
  
  <aside class="w-64 bg-white shadow-md">
    <div class="p-6 font-bold text-purple-700 text-2xl">AdminPanel</div>
    <nav class="mt-8">
      <a href="#" class="block py-3 px-6 text-gray-700 hover:bg-purple-100">Dashboard</a>
      <a href="#" class="block py-3 px-6 text-gray-700 hover:bg-purple-100">Users</a>
      <a href="#" class="block py-3 px-6 text-gray-700 hover:bg-purple-100">Analytics</a>
      <a href="#" class="block py-3 px-6 text-gray-700 hover:bg-purple-100">Settings</a>
    </nav>
  </aside>

<div class="flex-1 flex flex-col">
    
    <header class="bg-white shadow-md p-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-purple-700">Dashboard</h1>
      <div class="flex items-center gap-4">
        <input type="text" placeholder="Search..." class="px-4 py-2 border rounded-lg">
        <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold">SR</div>
      </div>
    </header>

<main class="p-6 space-y-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
  <div class="bg-white p-6 rounded-lg shadow-md">
    <p class="text-sm text-gray-500">Total Users</p>
    <h2 class="text-3xl font-bold text-purple-700 mt-2">1,240</h2>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <p class="text-sm text-gray-500">Revenue</p>
    <h2 class="text-3xl font-bold text-green-600 mt-2">$24,500</h2>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <p class="text-sm text-gray-500">New Orders</p>
    <h2 class="text-3xl font-bold text-blue-600 mt-2">320</h2>
  </div>
  <div class="bg-white p-6 rounded-lg shadow-md">
    <p class="text-sm text-gray-500">Pending Tickets</p>
    <h2 class="text-3xl font-bold text-red-500 mt-2">12</h2>
  </div>
</div>

<div class="bg-white rounded-lg shadow-md">
  <div class="p-4 border-b font-bold text-purple-700">User List</div>
  <table class="w-full text-left">
    <thead class="bg-purple-50">
      <tr>
        <th class="p-4">Name</th>
        <th class="p-4">Email</th>
        <th class="p-4">Role</th>
        <th class="p-4">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-t">
        <td class="p-4">John Doe</td>
        <td class="p-4">john@example.com</td>
        <td class="p-4">Admin</td>
        <td class="p-4 text-green-600 font-bold">Active</td>
      </tr>
      <tr class="border-t">
        <td class="p-4">Jane Smith</td>
        <td class="p-4">jane@example.com</td>
        <td class="p-4">Editor</td>
        <td class="p-4 text-yellow-500 font-bold">Pending</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bg-white p-6 rounded-lg shadow-md grid grid-cols-2 md:grid-cols-4 gap-4">
  <button class="bg-purple-600 text-white py-3 rounded-lg shadow hover:bg-purple-700">Add User</button>
  <button class="bg-blue-600 text-white py-3 rounded-lg shadow hover:bg-blue-700">Export Data</button>
  <button class="bg-green-600 text-white py-3 rounded-lg shadow hover:bg-green-700">Generate Report</button>
  <button class="bg-red-600 text-white py-3 rounded-lg shadow hover:bg-red-700">Delete Records</button>
</div>

<div class="bg-white p-6 rounded-lg shadow-md flex items-center gap-6">
  <img src="https://i.pravatar.cc/100" alt="Profile" class="w-20 h-20 rounded-full shadow">
  <div>
    <h3 class="text-xl font-bold text-purple-700">Sophia Ray</h3>
    <p class="text-gray-500">Administrator</p>
    <button class="mt-2 bg-purple-600 text-white px-4 py-2 rounded-lg shadow hover:bg-purple-700">Edit Profile</button>
  </div>
</div>

<footer class="bg-white p-4 mt-10 text-center text-sm text-gray-400 border-t">
  © 2025 AdminPanel. All rights reserved.
</footer>

Related Examples

Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.8k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
beautifull web page
I create a web page using cloude ai its amazing.

Akram Khan

2 years ago

3.6k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3.1k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.3k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
navigation header
responsive navigation header

Abid Ullah

2 years ago

3.5k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

2 years ago

4.6k
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Muhammad Rizqi Juniyanto

2 years ago

3.9k