Home
Lekhraj Ghimire
admin panel UI

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 CSS v3. 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

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>

Related Examples

quora/reddit
reddit / quora have some kind of same template. looksalikes. brothas

Author:
Anonymous

1 year ago

11.2k
Services

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

5 months ago

1.4k
Four columns with address location
You can use this Tailwind Footer example to first show address location of your company with brand logo next to sitemap links.

Author:
Pagedone

1 year ago

1.6k
Best Responsive Navbar Design | Easy & Modern Navigation
Learn how to create a fully responsive navbar using HTML, CSS, and JavaScript. Perfect for beginners and developers looking for a modern, mobile-friendly navigation bar.

Author:
Vishvajeet

4 months ago

2.4k
Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

1 year ago

6.7k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

2 months ago

646
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

117
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Repal co

3 months ago

337
Simple dialpad

Author:
Brandon D

2 years ago

10.9k
Tailwind Footer with dark version
This example can be used if you are looking for four column footer in dark version with sitemap links, brand logo, and social media accounts.

Author:
Pagedone

1 year ago

2.8k
Terms of Service Page Template

Author:
Anonymous

5 months ago

1.3k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

2 months ago

317

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components