dashboard analytics kpi charts data-table admin modern
Dashboard Analytics
Modern analytics dashboard with KPI cards, revenue chart, data table, and activity feed.
modern Responsive
Live Preview
Sections
sidebarheaderkpi-cardschartactivity-feeddata-table
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InsightBoard — Analytics Dashboard</title>
<meta name="description" content="Real-time analytics dashboard with KPI cards, charts, and activity feeds." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — indigo analytics identity */
:root {
--color-primary: #4f46e5;
--color-primary-hover: #4338ca;
--color-primary-soft: #eef2ff;
--color-primary-text: #ffffff;
}
/* interactions/hover-lift — applied to KPI cards */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.2);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
/* interactions/table-row-highlight */
.table-row-highlight {
--row-highlight-bg: color-mix(in srgb, currentColor 6%, transparent);
--row-highlight-border: color-mix(in srgb, currentColor 12%, transparent);
transition:
background-color 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
}
.table-row-highlight:hover,
.table-row-highlight:focus-within,
.table-row-highlight[data-active="true"],
.table-row-highlight.is-active {
background-color: var(--row-highlight-bg);
box-shadow: inset 0 0 0 1px var(--row-highlight-border);
}
@media (prefers-reduced-motion: reduce) {
.table-row-highlight { transition-duration: 1ms; }
}
/* interactions/scrollbar */
.custom-scrollbar {
--scrollbar-width: 0.5rem;
--scrollbar-track: oklch(0.95 0 0);
--scrollbar-thumb: oklch(0.75 0 0);
--scrollbar-thumb-hover: oklch(0.55 0 0);
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.custom-scrollbar::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); }
.custom-scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
</style>
</head>
<body class="bg-gray-50 text-gray-900 antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="ws-sidebar hidden lg:flex lg:flex-col w-64 bg-white border-r border-gray-200">
<div class="flex items-center gap-2 h-16 px-6 border-b border-gray-200">
<svg class="w-8 h-8" style="color: var(--color-primary);" viewBox="0 0 32 32" fill="none" aria-hidden="true"><rect width="32" height="32" rx="8" fill="currentColor"/><path d="M10 22V14M16 22V10M22 22V16" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
<span class="text-lg font-bold text-gray-900">InsightBoard</span>
</div>
<nav class="flex-1 px-4 py-6 space-y-1" aria-label="Sidebar">
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg" style="background-color: var(--color-primary-soft); color: var(--color-primary);">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4"/></svg>
Dashboard
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6m6 0h6m-6 0V5a2 2 0 012-2h2a2 2 0 012 2v14"/></svg>
Analytics
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
Customers
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
Reports
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
Settings
</a>
</nav>
</aside>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Header -->
<header class="ws-navbar flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200">
<div>
<h1 class="text-lg font-semibold text-gray-900">Dashboard</h1>
<p class="text-xs text-gray-500">Welcome back, Sarah</p>
</div>
<div class="flex items-center gap-4">
<button class="relative p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100" aria-label="Notifications">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold" style="background-color: var(--color-primary-soft); color: var(--color-primary);">SC</div>
<span class="hidden sm:block text-sm font-medium text-gray-700">Sarah Chen</span>
</div>
</div>
</header>
<!-- Content -->
<main class="ws-dashboard flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6">
<!-- KPI Cards -->
<div class="ws-stats grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="hover-lift bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Total Revenue</p>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+12.5%</span>
</div>
<p class="mt-2 text-2xl font-bold text-gray-900">$48,352</p>
<p class="mt-1 text-xs text-gray-500">vs $42,980 last month</p>
</div>
<div class="hover-lift bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Active Users</p>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+8.1%</span>
</div>
<p class="mt-2 text-2xl font-bold text-gray-900">12,847</p>
<p class="mt-1 text-xs text-gray-500">vs 11,882 last month</p>
</div>
<div class="hover-lift bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Conversion Rate</p>
<span class="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">-2.3%</span>
</div>
<p class="mt-2 text-2xl font-bold text-gray-900">3.24%</p>
<p class="mt-1 text-xs text-gray-500">vs 3.31% last month</p>
</div>
<div class="hover-lift bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Avg. Order Value</p>
<span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">+4.7%</span>
</div>
<p class="mt-2 text-2xl font-bold text-gray-900">$67.40</p>
<p class="mt-1 text-xs text-gray-500">vs $64.38 last month</p>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
<!-- Chart Area -->
<div class="xl:col-span-2 bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-base font-semibold text-gray-900">Revenue Overview</h2>
<div class="flex gap-2">
<button class="px-3 py-1 text-xs font-medium rounded-lg" style="background-color: var(--color-primary-soft); color: var(--color-primary);">Monthly</button>
<button class="px-3 py-1 text-xs font-medium rounded-lg text-gray-500 hover:bg-gray-50">Weekly</button>
</div>
</div>
<!-- CSS Chart Approximation -->
<div class="relative h-48">
<div class="absolute inset-0 flex items-end gap-1">
<div class="flex-1 rounded-t" style="height:40%; background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:55%; background-color: color-mix(in srgb, var(--color-primary) 28%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:45%; background-color: color-mix(in srgb, var(--color-primary) 36%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:60%; background-color: color-mix(in srgb, var(--color-primary) 44%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:50%; background-color: color-mix(in srgb, var(--color-primary) 52%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:75%; background-color: color-mix(in srgb, var(--color-primary) 60%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:65%; background-color: color-mix(in srgb, var(--color-primary) 68%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:80%; background-color: color-mix(in srgb, var(--color-primary) 76%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:70%; background-color: color-mix(in srgb, var(--color-primary) 84%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:90%; background-color: color-mix(in srgb, var(--color-primary) 88%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:85%; background-color: color-mix(in srgb, var(--color-primary) 92%, transparent);"></div>
<div class="flex-1 rounded-t" style="height:100%; background-color: var(--color-primary);"></div>
</div>
<div class="absolute bottom-0 left-0 right-0 border-t border-gray-100"></div>
</div>
<div class="flex justify-between mt-3 text-xs text-gray-400">
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
<span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dec</span>
</div>
</div>
<!-- Activity Feed -->
<div class="bg-white rounded-xl border border-gray-200 p-6">
<h2 class="text-base font-semibold text-gray-900 mb-4">Recent Activity</h2>
<div class="space-y-4">
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center text-xs font-semibold text-emerald-700 shrink-0">JD</div>
<div>
<p class="text-sm text-gray-900"><span class="font-medium">John Doe</span> placed an order</p>
<p class="text-xs text-gray-500">2 minutes ago · $234.00</p>
</div>
</div>
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-xs font-semibold text-blue-700 shrink-0">AM</div>
<div>
<p class="text-sm text-gray-900"><span class="font-medium">Alice Miller</span> signed up</p>
<p class="text-xs text-gray-500">18 minutes ago</p>
</div>
</div>
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-xs font-semibold text-amber-700 shrink-0">RK</div>
<div>
<p class="text-sm text-gray-900"><span class="font-medium">Rob Kim</span> upgraded to Pro</p>
<p class="text-xs text-gray-500">1 hour ago · $29/mo</p>
</div>
</div>
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-xs font-semibold text-purple-700 shrink-0">EM</div>
<div>
<p class="text-sm text-gray-900"><span class="font-medium">Eva Martinez</span> left a review</p>
<p class="text-xs text-gray-500">3 hours ago · 5 stars</p>
</div>
</div>
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-rose-100 flex items-center justify-center text-xs font-semibold text-rose-700 shrink-0">TL</div>
<div>
<p class="text-sm text-gray-900"><span class="font-medium">Tom Lee</span> requested a refund</p>
<p class="text-xs text-gray-500">5 hours ago · $89.00</p>
</div>
</div>
</div>
</div>
</div>
<!-- Data Table -->
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
<h2 class="text-base font-semibold text-gray-900">Recent Transactions</h2>
<button class="text-sm font-medium transition-colors" style="color: var(--color-primary);" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'">View All</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-sm text-left">
<thead class="bg-gray-50 text-gray-500 uppercase text-xs">
<tr>
<th class="px-6 py-3 font-medium">Customer</th>
<th class="px-6 py-3 font-medium">Product</th>
<th class="px-6 py-3 font-medium">Amount</th>
<th class="px-6 py-3 font-medium">Status</th>
<th class="px-6 py-3 font-medium">Date</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100">
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4 font-medium text-gray-900">Sarah Connor</td>
<td class="px-6 py-4 text-gray-600">Enterprise Plan</td>
<td class="px-6 py-4 text-gray-900 font-medium">$1,200.00</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700">Completed</span></td>
<td class="px-6 py-4 text-gray-500">Mar 21, 2026</td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4 font-medium text-gray-900">James Wilson</td>
<td class="px-6 py-4 text-gray-600">Pro Plan</td>
<td class="px-6 py-4 text-gray-900 font-medium">$49.00</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700">Completed</span></td>
<td class="px-6 py-4 text-gray-500">Mar 20, 2026</td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4 font-medium text-gray-900">Linda Park</td>
<td class="px-6 py-4 text-gray-600">Starter Plan</td>
<td class="px-6 py-4 text-gray-900 font-medium">$19.00</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-amber-50 text-amber-700">Pending</span></td>
<td class="px-6 py-4 text-gray-500">Mar 20, 2026</td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4 font-medium text-gray-900">Mark Davis</td>
<td class="px-6 py-4 text-gray-600">Enterprise Plan</td>
<td class="px-6 py-4 text-gray-900 font-medium">$1,200.00</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-red-50 text-red-700">Failed</span></td>
<td class="px-6 py-4 text-gray-500">Mar 19, 2026</td>
</tr>
<tr class="table-row-highlight text-gray-500">
<td class="px-6 py-4 font-medium text-gray-900">Nina Patel</td>
<td class="px-6 py-4 text-gray-600">Pro Plan</td>
<td class="px-6 py-4 text-gray-900 font-medium">$49.00</td>
<td class="px-6 py-4"><span class="px-2 py-0.5 text-xs font-medium rounded-full bg-emerald-50 text-emerald-700">Completed</span></td>
<td class="px-6 py-4 text-gray-500">Mar 18, 2026</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Modern analytics dashboard with sidebar navigation, KPI stat cards, revenue bar chart, transaction table, and activity feed. Clean layout with Inter font and indigo accent palette.