Dashboard Overview

This tailwind example is contributed by Ramkesh Gupta, on 27-Mar-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Admin Dashboard, User dashboard

Dashboard

Author Ramkesh Gupta

Tailwind v3.4 544 2

Fork Fullscreen

<div class="p-6 bg-gray-100 min-h-screen">
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mb-6">
    <div class="bg-red-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Total Employees</p>
        <h2 class="text-3xl font-bold mt-1">125</h2>
      </div>
      <div class="text-4xl opacity-90">👥</div>
    </div>

<div class="bg-blue-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Departments</p>
        <h2 class="text-3xl font-bold mt-1">8</h2>
      </div>
      <div class="text-4xl opacity-90">🏢</div>
    </div>

<div class="bg-green-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Attendance Today</p>
        <h2 class="text-3xl font-bold mt-1">113</h2>
      </div>
      <div class="text-4xl opacity-90">🕒</div>
    </div>

<div class="bg-yellow-500 text-white rounded-2xl shadow-md p-5 flex items-center justify-between">
      <div>
        <p class="text-sm opacity-90">Pending Payroll</p>
        <h2 class="text-3xl font-bold mt-1">12</h2>
      </div>
      <div class="text-4xl opacity-90">💼</div>
    </div>
  </div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-6">
    <div class="bg-white rounded-2xl shadow-sm p-5">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Monthly Attendance</h3>
      <div class="h-72 flex items-end justify-between gap-3 border-t pt-6">
        <div class="flex flex-col items-center w-full">
          <div class="flex items-end gap-1 h-52">
            <div class="w-4 bg-green-600 rounded-t-md h-24"></div>
            <div class="w-4 bg-green-400 rounded-t-md h-16"></div>
            <div class="w-4 bg-slate-400 rounded-t-md h-28"></div>
          </div>
          <span class="text-xs text-gray-500 mt-2">Jan</span>
        </div>

<div class="bg-white rounded-2xl shadow-sm p-5">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Expense Breakdown</h3>
      <div class="flex flex-col items-center justify-center h-72">
        <div class="relative w-56 h-56 rounded-full bg-[conic-gradient(#3b82f6_0%_45%,#f97316_45%_60%,#16a34a_60%_85%,#facc15_85%_100%)]">
          <div class="absolute inset-10 bg-white rounded-full flex items-center justify-center text-center">
            <div>
              <p class="text-sm text-gray-500">Salaries</p>
              <h4 class="text-2xl font-bold text-blue-600">45%</h4>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="bg-white rounded-2xl shadow-sm p-5">
      <h3 class="text-lg font-bold text-gray-800 mb-4">Recent Activities</h3>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">👨</div>
            <p class="text-sm text-gray-700">John Doe added a new employee</p>
          </div>
          <span class="text-xs text-gray-500">5 mins ago</span>
        </div>

<div class="flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">👩</div>
            <p class="text-sm text-gray-700">Payroll processed for June</p>
          </div>
          <span class="text-xs text-gray-500">30 mins ago</span>
        </div>

<div class="flex items-center justify-between border-b pb-3">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-lg">🧑</div>
            <p class="text-sm text-gray-700">Finance report updated</p>
          </div>
          <span class="text-xs text-gray-500">1 hour ago</span>
        </div>
      </div>

<button class="mt-5 w-full bg-slate-100 hover:bg-slate-200 text-slate-700 py-2.5 rounded-xl font-medium transition">
        🔔 New Notifications
      </button>
    </div>
  </div>
</div>

Related Examples

Coursue - Online Learning Dashboard
Beginner's Guide to Becoming a Professional Front-End Developer

Alif Bima Pradana

7 months ago

532
User dashboard

Anonymous

2 years ago

14k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

1.3k
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.

Lekhraj Ghimire

1 year ago

2.5k
background
A background is the area behind the content of an element (like a page, section, or div). It helps define the look and feel by adding colors, images, gradients, or patterns.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Analytics dashboard with multiple chart types
Analytics Dashboard Comprehensive data insights and performance metrics

Alif Bima Pradana

8 months ago

1.6k
eCommerce Customer Profile Dashboard with Wishlist & Orders
A modern customer profile dashboard built with HTML, Tailwind CSS, and vanilla JavaScript. It includes an editable profile section, order history, wishlist management, product reviews, tabbed navigation, responsive sidebar, toast notifications, and clean eCommerce-inspired UI. Perfect for online stores, marketplaces, customer portals, account management systems, and shopping applications.

JUGENDRA GANGWAR

3 months ago

325
Infographic Component
Design a modern infographic component with Tailwind CSS. This component helps you display data in a clean, responsive, and visually appealing way. With utility classes, gradients, and smooth transitions, you can quickly build infographics that look professional and work perfectly on all devices.

CodewithFaraz

1 year ago

1.4k
EVDesign Admin Dashboard modern elegant
EVDesign Admin Dashboard

Alif Bima Pradana

7 months ago

1.3k
pange
pejdz

Anonymous

2 years ago

12.9k
Targeta
Targeta

Raul antonio de la cruz hernandez

11 months ago

865
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

1 month ago

54