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 461 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

Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

2 months ago

279
Engineering Project Dashboard
Track engineering assignments, project progress, technology stack, and delivery timelines in one simple dashboard.

Ayyamperumal S

6 months ago

470
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
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Siva Naga Malleswararao Kurakula

1 year ago

2.2k
EVDesign Admin Dashboard modern elegant
EVDesign Admin Dashboard

Alif Bima Pradana

6 months ago

1.2k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

7 months ago

948
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

6 months ago

957
Total balance overview

Raul antonio de la cruz hernandez

10 months ago

1.1k
Card kpi Chart
Targetas kpi con graficas

Raul antonio de la cruz hernandez

10 months ago

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

Alif Bima Pradana

7 months ago

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

ABDESLAMI ACHRAF

2 years ago

4.6k
User dashboard

Anonymous

2 years ago

14k