Back to templates components
Analytics Dashboard
A starting-point application dashboard example built with Tailwind CSS, combining a sidebar, topbar, stat cards, revenue and order charts, and a data table into a single page. Not a production-ready template.
Staring point — not a finished product
This template combines existing HyperUI components into a full page layout to help you move faster. It still needs real content, working functionality, accessibility checks, and testing before it's ready for production.
0/5 Dark Mode (Request)Updated: Jul 8, 2026
<input type="checkbox" id="sidebar-toggle" class="peer sr-only" />
<label
for="sidebar-toggle"
aria-hidden="true"
class="fixed inset-0 z-30 hidden bg-gray-900/50 peer-checked:block lg:hidden"
></label>
<div
id="dashboard-sidebar"
class="fixed inset-y-0 start-0 z-40 flex w-64 -translate-x-full flex-col justify-between overflow-y-auto border-e border-gray-200 bg-white transition-transform duration-300 peer-checked:translate-x-0 lg:static lg:translate-x-0 lg:shrink-0"
>
<div class="p-4">
<span
class="grid h-12 w-32 place-content-center rounded-lg bg-gray-100 text-sm text-gray-600"
>
Logo
</span>
<nav aria-label="Dashboard" class="mt-4">
<ul class="space-y-1">
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900"
>
Overview
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Customers
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Orders
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Billing
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-200">
<a
href="#"
class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50 hover:transition-colors"
>
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
class="size-10 rounded-full object-cover"
/>
<p class="text-xs text-gray-900">
<strong class="block font-medium">Priya Natarajan</strong>
<span>priya@orbitly.com</span>
</p>
</a>
</div>
</div>
<div class="flex flex-1 flex-col overflow-y-auto">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">
<label
for="sidebar-toggle"
id="sidebar-toggle-label"
aria-expanded="false"
aria-controls="dashboard-sidebar"
class="cursor-pointer rounded-md p-2 text-gray-600 transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-gray-900 peer-focus-visible:ring-offset-2 hover:bg-gray-100 lg:hidden"
>
<span class="sr-only">Toggle menu</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<h1 class="text-lg font-semibold text-gray-900">Overview</h1>
</div>
<a
href="#"
class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800"
>
New report
</a>
</header>
<main class="flex-1 space-y-6 p-6">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
<article class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6">
<div class="inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<span class="text-xs font-medium">12.4%</span>
</div>
<div>
<strong class="block text-sm font-medium text-gray-600">Monthly revenue</strong>
<p>
<span class="text-2xl font-medium text-gray-900">$48,204</span>
<span class="text-xs text-gray-600">from $42,910</span>
</p>
</div>
<div class="h-10">
<canvas
id="revenue-trend-sparkline"
role="img"
aria-label="Sparkline showing monthly revenue trending upward over the last six months"
></canvas>
</div>
</article>
<article class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6">
<div class="inline-flex gap-2 self-end rounded-sm bg-green-100 p-1 text-green-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span class="sr-only">Increase: </span>
<span class="text-xs font-medium">4.1%</span>
</div>
<div>
<strong class="block text-sm font-medium text-gray-600">Active customers</strong>
<p>
<span class="text-2xl font-medium text-gray-900">2,318</span>
<span class="text-xs text-gray-600">from 2,227</span>
</p>
</div>
</article>
<article class="flex flex-col gap-4 rounded-lg border border-gray-200 bg-white p-6">
<div class="inline-flex gap-2 self-end rounded-sm bg-red-100 p-1 text-red-600">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 17h8m0 0V9m0 8l-8-8-4 4-6-6"
/>
</svg>
<span class="sr-only">Decrease: </span>
<span class="text-xs font-medium">2.6%</span>
</div>
<div>
<strong class="block text-sm font-medium text-gray-600">Churn rate</strong>
<p>
<span class="text-2xl font-medium text-gray-900">1.8%</span>
<span class="text-xs text-gray-600">from 2.1%</span>
</p>
</div>
</article>
</div>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
<div class="rounded-lg border border-gray-200 bg-white p-6 lg:col-span-2">
<div class="flex items-center justify-between">
<h2 class="text-sm font-medium text-gray-900">Revenue trend</h2>
<div class="inline-flex rounded-md border border-gray-200 p-0.5 text-xs font-medium">
<button
type="button"
data-revenue-range="6m"
aria-pressed="true"
class="rounded-sm bg-gray-100 px-2 py-1 text-gray-900"
>
6M
</button>
<button
type="button"
data-revenue-range="12m"
aria-pressed="false"
class="rounded-sm px-2 py-1 text-gray-600"
>
12M
</button>
</div>
</div>
<div class="mt-4 h-64">
<canvas
id="revenue-trend-line-chart"
role="img"
aria-label="Line chart showing monthly revenue rising from $28,000 in January to $48,000 in June"
></canvas>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Orders by status</h2>
<div class="mt-4 h-64">
<canvas
id="order-status-donut-chart"
role="img"
aria-label="Donut chart showing 68% of orders paid, 22% pending, and 10% refunded"
></canvas>
</div>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Recent orders</h2>
<div class="mt-4 overflow-x-auto">
<table class="min-w-full divide-y-2 divide-gray-200">
<thead class="ltr:text-left rtl:text-right">
<tr class="*:font-medium *:text-gray-900">
<th class="px-3 py-2 whitespace-nowrap">Customer</th>
<th class="px-3 py-2 whitespace-nowrap">Order</th>
<th class="px-3 py-2 whitespace-nowrap">Status</th>
<th class="px-3 py-2 whitespace-nowrap">Amount</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
<td class="px-3 py-2 whitespace-nowrap">#3921</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$412.00</td>
</tr>
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
<td class="px-3 py-2 whitespace-nowrap">#3920</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs text-yellow-700">
Pending
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$128.50</td>
</tr>
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">Nadja</td>
<td class="px-3 py-2 whitespace-nowrap">#3919</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$894.20</td>
</tr>
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
<td class="px-3 py-2 whitespace-nowrap">#3918</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-red-100 px-2.5 py-0.5 text-xs text-red-700">
Refunded
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$56.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
const revenueTrendSparklineCanvas = document.getElementById('revenue-trend-sparkline')
const revenueTrendLineChartCanvas = document.getElementById('revenue-trend-line-chart')
const orderStatusDonutChartCanvas = document.getElementById('order-status-donut-chart')
const revenueRangeButtons = document.querySelectorAll('[data-revenue-range]')
const revenueRangesByPeriod = {
'6m': {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
values: [28000, 34000, 31000, 39000, 42000, 48000],
},
'12m': {
labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
values: [
19000, 21500, 20000, 23500, 25000, 27000, 28000, 34000, 31000, 39000, 42000, 48000,
],
},
}
new Chart(revenueTrendSparklineCanvas, {
type: 'line',
data: {
labels: revenueRangesByPeriod['6m'].labels,
datasets: [
{
data: revenueRangesByPeriod['6m'].values,
borderColor: '#10b981',
borderWidth: 2,
pointRadius: 0,
tension: 0.35,
fill: false,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false },
tooltip: { enabled: false },
},
scales: {
x: { display: false },
y: { display: false },
},
},
})
const revenueTrendChartContext = revenueTrendLineChartCanvas.getContext('2d')
const revenueTrendFillGradient = revenueTrendChartContext.createLinearGradient(0, 0, 0, 256)
revenueTrendFillGradient.addColorStop(0, 'rgba(79, 70, 229, 0.25)')
revenueTrendFillGradient.addColorStop(1, 'rgba(79, 70, 229, 0)')
const revenueTrendLineChart = new Chart(revenueTrendLineChartCanvas, {
type: 'line',
data: {
labels: revenueRangesByPeriod['6m'].labels,
datasets: [
{
label: 'Revenue',
data: revenueRangesByPeriod['6m'].values,
borderColor: '#4f46e5',
backgroundColor: revenueTrendFillGradient,
borderWidth: 2,
pointRadius: 0,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#4f46e5',
pointHoverBorderColor: '#ffffff',
pointHoverBorderWidth: 2,
tension: 0.35,
fill: true,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (tooltipItem) => `$${tooltipItem.formattedValue}`,
},
},
},
scales: {
x: {
grid: { display: false },
ticks: { color: '#4b5563' },
},
y: {
beginAtZero: true,
grid: { color: '#e5e7eb' },
ticks: {
color: '#4b5563',
callback: (tickValue) => `$${Number(tickValue) / 1000}k`,
},
},
},
},
})
revenueRangeButtons.forEach((revenueRangeButton) => {
revenueRangeButton.addEventListener('click', () => {
const selectedRange = revenueRangeButton.dataset.revenueRange
revenueRangeButtons.forEach((otherRangeButton) => {
const isSelectedButton = otherRangeButton === revenueRangeButton
otherRangeButton.setAttribute('aria-pressed', String(isSelectedButton))
otherRangeButton.classList.toggle('bg-gray-100', isSelectedButton)
otherRangeButton.classList.toggle('text-gray-900', isSelectedButton)
otherRangeButton.classList.toggle('text-gray-600', !isSelectedButton)
})
revenueTrendLineChart.data.labels = revenueRangesByPeriod[selectedRange].labels
revenueTrendLineChart.data.datasets[0].data = revenueRangesByPeriod[selectedRange].values
revenueTrendLineChart.update()
})
})
new Chart(orderStatusDonutChartCanvas, {
type: 'doughnut',
data: {
labels: ['Paid', 'Pending', 'Refunded'],
datasets: [
{
data: [68, 22, 10],
backgroundColor: ['#10b981', '#f59e0b', '#f43f5e'],
hoverBackgroundColor: ['#059669', '#d97706', '#e11d48'],
borderColor: '#ffffff',
borderWidth: 2,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '70%',
plugins: {
legend: {
position: 'bottom',
labels: { color: '#4b5563' },
},
tooltip: {
callbacks: {
label: (tooltipItem) => `${tooltipItem.label}: ${tooltipItem.formattedValue}%`,
},
},
},
},
})
</script>
<script>
const sidebarToggleCheckbox = document.getElementById('sidebar-toggle')
const sidebarToggleLabel = document.getElementById('sidebar-toggle-label')
sidebarToggleCheckbox.addEventListener('change', () => {
sidebarToggleLabel.setAttribute('aria-expanded', String(sidebarToggleCheckbox.checked))
})
</script>Plugins: chart.js
<input type="checkbox" id="sidebar-toggle" class="peer sr-only" />
<label
for="sidebar-toggle"
aria-hidden="true"
class="fixed inset-0 z-30 hidden bg-gray-900/50 peer-checked:block lg:hidden"
></label>
<div
id="dashboard-sidebar"
class="fixed inset-y-0 start-0 z-40 flex w-64 -translate-x-full flex-col justify-between overflow-y-auto border-e border-gray-200 bg-white transition-transform duration-300 peer-checked:translate-x-0 lg:static lg:translate-x-0 lg:shrink-0"
>
<div class="p-4">
<span
class="grid h-12 w-32 place-content-center rounded-lg bg-gray-100 text-sm text-gray-600"
>
Logo
</span>
<nav aria-label="Dashboard" class="mt-4">
<ul class="space-y-1">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Overview
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900"
>
Customers
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Orders
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Billing
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-200">
<a
href="#"
class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50 hover:transition-colors"
>
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
class="size-10 rounded-full object-cover"
/>
<p class="text-xs text-gray-900">
<strong class="block font-medium">Priya Natarajan</strong>
<span>priya@orbitly.com</span>
</p>
</a>
</div>
</div>
<div class="flex flex-1 flex-col overflow-y-auto">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">
<label
for="sidebar-toggle"
id="sidebar-toggle-label"
aria-expanded="false"
aria-controls="dashboard-sidebar"
class="cursor-pointer rounded-md p-2 text-gray-600 transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-gray-900 peer-focus-visible:ring-offset-2 hover:bg-gray-100 lg:hidden"
>
<span class="sr-only">Toggle menu</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<h1 class="text-lg font-semibold text-gray-900">Customers</h1>
</div>
<a
href="#"
class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800"
>
Add customer
</a>
</header>
<main class="flex-1 space-y-6 p-6">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
<div class="rounded-lg border border-gray-200 bg-white p-6 lg:col-span-2">
<h2 class="text-sm font-medium text-gray-900">New customers</h2>
<div class="mt-4 h-64">
<canvas
id="new-customers-bar-chart"
role="img"
aria-label="Bar chart showing new customers per month rising from 82 in January to 128 in June"
></canvas>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Customers by plan</h2>
<ul class="mt-4 space-y-4">
<li>
<div class="flex items-center justify-between text-sm">
<span class="font-medium text-gray-900">Team</span>
<span class="text-gray-600">1,406</span>
</div>
<div class="mt-1.5 h-1.5 rounded-full bg-gray-100">
<div class="h-1.5 rounded-full bg-indigo-600" style="width: 61%"></div>
</div>
</li>
<li>
<div class="flex items-center justify-between text-sm">
<span class="font-medium text-gray-900">Starter</span>
<span class="text-gray-600">742</span>
</div>
<div class="mt-1.5 h-1.5 rounded-full bg-gray-100">
<div class="h-1.5 rounded-full bg-indigo-600" style="width: 32%"></div>
</div>
</li>
<li>
<div class="flex items-center justify-between text-sm">
<span class="font-medium text-gray-900">Enterprise</span>
<span class="text-gray-600">170</span>
</div>
<div class="mt-1.5 h-1.5 rounded-full bg-gray-100">
<div class="h-1.5 rounded-full bg-indigo-600" style="width: 7%"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<h2 class="text-sm font-medium text-gray-900">All customers</h2>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<label for="customer-search-input" class="sr-only">Search customers</label>
<div class="relative">
<input
type="text"
id="customer-search-input"
placeholder="Search customers"
class="w-full rounded-md border-gray-200 py-1.5 text-sm text-gray-900 shadow-xs ltr:pr-9 rtl:pl-9 sm:w-56"
/>
<span
class="pointer-events-none absolute inset-y-0 grid w-8 place-content-center text-gray-400 ltr:right-0 rtl:left-0"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>
</span>
</div>
<label for="customer-status-filter" class="sr-only">Filter by status</label>
<select
id="customer-status-filter"
class="rounded-md border-gray-200 py-1.5 text-sm text-gray-900 shadow-xs"
>
<option value="all">All statuses</option>
<option value="active">Active</option>
<option value="trial">Trial</option>
<option value="past-due">Past due</option>
</select>
</div>
</div>
<div class="mt-4 overflow-x-auto">
<table class="min-w-full divide-y-2 divide-gray-200">
<thead class="ltr:text-left rtl:text-right">
<tr class="*:font-medium *:text-gray-900">
<th class="px-3 py-2 whitespace-nowrap">Customer</th>
<th class="px-3 py-2 whitespace-nowrap">Email</th>
<th class="px-3 py-2 whitespace-nowrap">Plan</th>
<th class="px-3 py-2 whitespace-nowrap">Status</th>
<th class="px-3 py-2 whitespace-nowrap">Joined</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr
data-customer-row
data-customer-status="active"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
<td class="px-3 py-2 whitespace-nowrap">nandor@orbitly.com</td>
<td class="px-3 py-2 whitespace-nowrap">Team</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Active
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">Feb 3, 2025</td>
</tr>
<tr
data-customer-row
data-customer-status="active"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
<td class="px-3 py-2 whitespace-nowrap">laszlo@orbitly.com</td>
<td class="px-3 py-2 whitespace-nowrap">Enterprise</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Active
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">Nov 18, 2024</td>
</tr>
<tr
data-customer-row
data-customer-status="trial"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">Nadja</td>
<td class="px-3 py-2 whitespace-nowrap">nadja@orbitly.com</td>
<td class="px-3 py-2 whitespace-nowrap">Team</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs text-yellow-700">
Trial
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 9, 2025</td>
</tr>
<tr
data-customer-row
data-customer-status="past-due"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
<td class="px-3 py-2 whitespace-nowrap">guillermo@orbitly.com</td>
<td class="px-3 py-2 whitespace-nowrap">Starter</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-red-100 px-2.5 py-0.5 text-xs text-red-700">
Past due
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">Aug 22, 2024</td>
</tr>
<tr
data-customer-row
data-customer-status="active"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
<td class="px-3 py-2 whitespace-nowrap">colin@orbitly.com</td>
<td class="px-3 py-2 whitespace-nowrap">Starter</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Active
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">Jan 30, 2025</td>
</tr>
<tr id="customers-empty-row" class="hidden">
<td class="px-3 py-6 text-center text-gray-600" colspan="5">
No customers match your search.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
const newCustomersBarChartCanvas = document.getElementById('new-customers-bar-chart')
new Chart(newCustomersBarChartCanvas, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
label: 'New customers',
data: [82, 95, 88, 110, 104, 128],
backgroundColor: '#4f46e5',
hoverBackgroundColor: '#4338ca',
borderRadius: 4,
maxBarThickness: 32,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: (tooltipItem) => `${tooltipItem.formattedValue} customers`,
},
},
},
scales: {
x: {
grid: { display: false },
ticks: { color: '#4b5563' },
},
y: {
beginAtZero: true,
grid: { color: '#e5e7eb' },
ticks: { color: '#4b5563' },
},
},
},
})
const customerSearchInput = document.getElementById('customer-search-input')
const customerStatusFilter = document.getElementById('customer-status-filter')
const customerRows = document.querySelectorAll('[data-customer-row]')
const customersEmptyRow = document.getElementById('customers-empty-row')
function refreshCustomerRows() {
const searchTerm = customerSearchInput.value.trim().toLowerCase()
const selectedStatus = customerStatusFilter.value
let visibleRowCount = 0
customerRows.forEach((customerRow) => {
const matchesSearch = customerRow.textContent.toLowerCase().includes(searchTerm)
const matchesStatus =
selectedStatus === 'all' || customerRow.dataset.customerStatus === selectedStatus
const isRowVisible = matchesSearch && matchesStatus
customerRow.classList.toggle('hidden', !isRowVisible)
if (isRowVisible) {
visibleRowCount += 1
}
})
customersEmptyRow.classList.toggle('hidden', visibleRowCount > 0)
}
customerSearchInput.addEventListener('input', refreshCustomerRows)
customerStatusFilter.addEventListener('change', refreshCustomerRows)
</script>
<script>
const sidebarToggleCheckbox = document.getElementById('sidebar-toggle')
const sidebarToggleLabel = document.getElementById('sidebar-toggle-label')
sidebarToggleCheckbox.addEventListener('change', () => {
sidebarToggleLabel.setAttribute('aria-expanded', String(sidebarToggleCheckbox.checked))
})
</script>Plugins: chart.js
<input type="checkbox" id="sidebar-toggle" class="peer sr-only" />
<label
for="sidebar-toggle"
aria-hidden="true"
class="fixed inset-0 z-30 hidden bg-gray-900/50 peer-checked:block lg:hidden"
></label>
<div
id="dashboard-sidebar"
class="fixed inset-y-0 start-0 z-40 flex w-64 -translate-x-full flex-col justify-between overflow-y-auto border-e border-gray-200 bg-white transition-transform duration-300 peer-checked:translate-x-0 lg:static lg:translate-x-0 lg:shrink-0"
>
<div class="p-4">
<span
class="grid h-12 w-32 place-content-center rounded-lg bg-gray-100 text-sm text-gray-600"
>
Logo
</span>
<nav aria-label="Dashboard" class="mt-4">
<ul class="space-y-1">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Overview
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Customers
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900"
>
Orders
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Billing
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-200">
<a
href="#"
class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50 hover:transition-colors"
>
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
class="size-10 rounded-full object-cover"
/>
<p class="text-xs text-gray-900">
<strong class="block font-medium">Priya Natarajan</strong>
<span>priya@orbitly.com</span>
</p>
</a>
</div>
</div>
<div class="flex flex-1 flex-col overflow-y-auto">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">
<label
for="sidebar-toggle"
id="sidebar-toggle-label"
aria-expanded="false"
aria-controls="dashboard-sidebar"
class="cursor-pointer rounded-md p-2 text-gray-600 transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-gray-900 peer-focus-visible:ring-offset-2 hover:bg-gray-100 lg:hidden"
>
<span class="sr-only">Toggle menu</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<h1 class="text-lg font-semibold text-gray-900">Orders</h1>
</div>
<a
href="#"
class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800"
>
Export orders
</a>
</header>
<main class="flex-1 space-y-6 p-6">
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Orders vs monthly target</h2>
<div class="mt-4 h-64">
<canvas
id="orders-target-combo-chart"
role="img"
aria-label="Combo chart showing monthly orders against a target, with orders passing the target from April onward"
></canvas>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<h2 class="text-sm font-medium text-gray-900">All orders</h2>
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<label for="order-search-input" class="sr-only">Search orders</label>
<div class="relative">
<input
type="text"
id="order-search-input"
placeholder="Search orders"
class="w-full rounded-md border-gray-200 py-1.5 text-sm text-gray-900 shadow-xs ltr:pr-9 rtl:pl-9 sm:w-56"
/>
<span
class="pointer-events-none absolute inset-y-0 grid w-8 place-content-center text-gray-400 ltr:right-0 rtl:left-0"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>
</span>
</div>
<div class="inline-flex rounded-md border border-gray-200 p-0.5 text-xs font-medium">
<button
type="button"
data-order-status-filter="all"
aria-pressed="true"
class="rounded-sm bg-gray-100 px-2 py-1 text-gray-900"
>
All
</button>
<button
type="button"
data-order-status-filter="paid"
aria-pressed="false"
class="rounded-sm px-2 py-1 text-gray-600"
>
Paid
</button>
<button
type="button"
data-order-status-filter="pending"
aria-pressed="false"
class="rounded-sm px-2 py-1 text-gray-600"
>
Pending
</button>
<button
type="button"
data-order-status-filter="refunded"
aria-pressed="false"
class="rounded-sm px-2 py-1 text-gray-600"
>
Refunded
</button>
</div>
</div>
</div>
<div class="mt-4 overflow-x-auto">
<table class="min-w-full divide-y-2 divide-gray-200">
<thead class="ltr:text-left rtl:text-right">
<tr class="*:font-medium *:text-gray-900">
<th class="px-3 py-2 whitespace-nowrap">Order</th>
<th class="px-3 py-2 whitespace-nowrap">Customer</th>
<th class="px-3 py-2 whitespace-nowrap">Date</th>
<th class="px-3 py-2 whitespace-nowrap">Status</th>
<th class="px-3 py-2 whitespace-nowrap">Amount</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr data-order-row data-order-status="paid" class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">#3921</td>
<td class="px-3 py-2 whitespace-nowrap">Nandor the Relentless</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 12, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$412.00</td>
</tr>
<tr
data-order-row
data-order-status="pending"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">#3920</td>
<td class="px-3 py-2 whitespace-nowrap">Laszlo Cravensworth</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 11, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs text-yellow-700">
Pending
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$128.50</td>
</tr>
<tr data-order-row data-order-status="paid" class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">#3919</td>
<td class="px-3 py-2 whitespace-nowrap">Nadja</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 10, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$894.20</td>
</tr>
<tr
data-order-row
data-order-status="refunded"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">#3918</td>
<td class="px-3 py-2 whitespace-nowrap">Guillermo de la Cruz</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 9, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-red-100 px-2.5 py-0.5 text-xs text-red-700">
Refunded
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$56.00</td>
</tr>
<tr data-order-row data-order-status="paid" class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">#3917</td>
<td class="px-3 py-2 whitespace-nowrap">Colin Robinson</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 8, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$219.75</td>
</tr>
<tr
data-order-row
data-order-status="pending"
class="*:text-gray-900 *:first:font-medium"
>
<td class="px-3 py-2 whitespace-nowrap">#3916</td>
<td class="px-3 py-2 whitespace-nowrap">The Guide</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 7, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs text-yellow-700">
Pending
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$63.40</td>
</tr>
<tr id="orders-empty-row" class="hidden">
<td class="px-3 py-6 text-center text-gray-600" colspan="5">
No orders match your search.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
<script>
const ordersTargetComboChartCanvas = document.getElementById('orders-target-combo-chart')
new Chart(ordersTargetComboChartCanvas, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
datasets: [
{
type: 'bar',
label: 'Orders',
data: [210, 245, 228, 268, 289, 312],
backgroundColor: '#4f46e5',
hoverBackgroundColor: '#4338ca',
borderRadius: 4,
maxBarThickness: 32,
order: 2,
},
{
type: 'line',
label: 'Target',
data: [230, 230, 230, 260, 260, 260],
borderColor: '#f59e0b',
backgroundColor: '#f59e0b',
borderWidth: 2,
borderDash: [6, 4],
pointRadius: 0,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#f59e0b',
pointHoverBorderColor: '#ffffff',
pointHoverBorderWidth: 2,
tension: 0,
fill: false,
order: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
legend: {
position: 'bottom',
labels: { color: '#4b5563' },
},
tooltip: {
callbacks: {
label: (tooltipItem) => `${tooltipItem.dataset.label}: ${tooltipItem.formattedValue}`,
},
},
},
scales: {
x: {
grid: { display: false },
ticks: { color: '#4b5563' },
},
y: {
beginAtZero: true,
grid: { color: '#e5e7eb' },
ticks: { color: '#4b5563' },
},
},
},
})
const orderSearchInput = document.getElementById('order-search-input')
const orderStatusFilterButtons = document.querySelectorAll('[data-order-status-filter]')
const orderRows = document.querySelectorAll('[data-order-row]')
const ordersEmptyRow = document.getElementById('orders-empty-row')
let selectedOrderStatusFilter = 'all'
function refreshOrderRows() {
const searchTerm = orderSearchInput.value.trim().toLowerCase()
let visibleRowCount = 0
orderRows.forEach((orderRow) => {
const matchesSearch = orderRow.textContent.toLowerCase().includes(searchTerm)
const matchesStatus =
selectedOrderStatusFilter === 'all' ||
orderRow.dataset.orderStatus === selectedOrderStatusFilter
const isRowVisible = matchesSearch && matchesStatus
orderRow.classList.toggle('hidden', !isRowVisible)
if (isRowVisible) {
visibleRowCount += 1
}
})
ordersEmptyRow.classList.toggle('hidden', visibleRowCount > 0)
}
orderSearchInput.addEventListener('input', refreshOrderRows)
orderStatusFilterButtons.forEach((orderStatusFilterButton) => {
orderStatusFilterButton.addEventListener('click', () => {
selectedOrderStatusFilter = orderStatusFilterButton.dataset.orderStatusFilter
orderStatusFilterButtons.forEach((otherFilterButton) => {
const isSelectedButton = otherFilterButton === orderStatusFilterButton
otherFilterButton.setAttribute('aria-pressed', String(isSelectedButton))
otherFilterButton.classList.toggle('bg-gray-100', isSelectedButton)
otherFilterButton.classList.toggle('text-gray-900', isSelectedButton)
otherFilterButton.classList.toggle('text-gray-600', !isSelectedButton)
})
refreshOrderRows()
})
})
</script>
<script>
const sidebarToggleCheckbox = document.getElementById('sidebar-toggle')
const sidebarToggleLabel = document.getElementById('sidebar-toggle-label')
sidebarToggleCheckbox.addEventListener('change', () => {
sidebarToggleLabel.setAttribute('aria-expanded', String(sidebarToggleCheckbox.checked))
})
</script>Plugins: chart.js
<input type="checkbox" id="sidebar-toggle" class="peer sr-only" />
<label
for="sidebar-toggle"
aria-hidden="true"
class="fixed inset-0 z-30 hidden bg-gray-900/50 peer-checked:block lg:hidden"
></label>
<div
id="dashboard-sidebar"
class="fixed inset-y-0 start-0 z-40 flex w-64 -translate-x-full flex-col justify-between overflow-y-auto border-e border-gray-200 bg-white transition-transform duration-300 peer-checked:translate-x-0 lg:static lg:shrink-0 lg:translate-x-0"
>
<div class="p-4">
<span
class="grid h-12 w-32 place-content-center rounded-lg bg-gray-100 text-sm text-gray-600"
>
Logo
</span>
<nav aria-label="Dashboard" class="mt-4">
<ul class="space-y-1">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Overview
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Customers
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Orders
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900"
>
Billing
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-200">
<a
href="#"
class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50 hover:transition-colors"
>
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
class="size-10 rounded-full object-cover"
/>
<p class="text-xs text-gray-900">
<strong class="block font-medium">Priya Natarajan</strong>
<span>priya@orbitly.com</span>
</p>
</a>
</div>
</div>
<div class="flex flex-1 flex-col overflow-y-auto">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">
<label
for="sidebar-toggle"
id="sidebar-toggle-label"
aria-expanded="false"
aria-controls="dashboard-sidebar"
class="cursor-pointer rounded-md p-2 text-gray-600 transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-gray-900 peer-focus-visible:ring-offset-2 hover:bg-gray-100 lg:hidden"
>
<span class="sr-only">Toggle menu</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<h1 class="text-lg font-semibold text-gray-900">Billing</h1>
</div>
<a
href="#"
class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800"
>
Update payment method
</a>
</header>
<main class="flex-1 space-y-6 p-6">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<div class="rounded-lg border border-gray-200 bg-white p-6">
<div class="flex items-center justify-between">
<h2 class="text-sm font-medium text-gray-900">Current plan</h2>
<span class="rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs text-indigo-700">
Team
</span>
</div>
<p class="mt-4">
<span class="text-2xl font-medium text-gray-900">$30</span>
<span class="text-xs text-gray-600">/month, billed monthly</span>
</p>
<p class="mt-1 text-xs text-gray-600">Renews on July 30, 2026</p>
<a
href="#"
class="mt-4 inline-block rounded-md border border-gray-200 px-4 py-2 text-sm font-medium text-gray-900 transition hover:bg-gray-50"
>
Change plan
</a>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Payment method</h2>
<div class="mt-4 flex items-center gap-3">
<span
class="grid h-8 w-12 shrink-0 place-content-center rounded-md bg-gray-100 text-xs font-medium text-gray-600"
>
Visa
</span>
<div class="text-sm">
<p class="font-medium text-gray-900">Ending in 6000</p>
<p class="text-gray-600">Expires 10/2060</p>
</div>
</div>
<a
href="#"
class="mt-4 inline-block rounded-md border border-gray-200 px-4 py-2 text-sm font-medium text-gray-900 transition hover:bg-gray-50"
>
Update card
</a>
</div>
</div>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Invoice history</h2>
<div class="mt-4 overflow-x-auto">
<table class="min-w-full divide-y-2 divide-gray-200">
<thead class="ltr:text-left rtl:text-right">
<tr class="*:font-medium *:text-gray-900">
<th class="px-3 py-2 whitespace-nowrap">Invoice</th>
<th class="px-3 py-2 whitespace-nowrap">Date</th>
<th class="px-3 py-2 whitespace-nowrap">Status</th>
<th class="px-3 py-2 whitespace-nowrap">Amount</th>
<th class="px-3 py-2 whitespace-nowrap"></th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">INV-2025-0006</td>
<td class="px-3 py-2 whitespace-nowrap">Jun 1, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$30.00</td>
<td class="px-3 py-2 whitespace-nowrap">
<a href="#" class="font-medium text-gray-900 underline underline-offset-2">
Download
</a>
</td>
</tr>
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">INV-2025-0005</td>
<td class="px-3 py-2 whitespace-nowrap">May 1, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-green-100 px-2.5 py-0.5 text-xs text-green-700">
Paid
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$30.00</td>
<td class="px-3 py-2 whitespace-nowrap">
<a href="#" class="font-medium text-gray-900 underline underline-offset-2">
Download
</a>
</td>
</tr>
<tr class="*:text-gray-900 *:first:font-medium">
<td class="px-3 py-2 whitespace-nowrap">INV-2025-0004</td>
<td class="px-3 py-2 whitespace-nowrap">Apr 1, 2025</td>
<td class="px-3 py-2 whitespace-nowrap">
<span class="rounded-full bg-red-100 px-2.5 py-0.5 text-xs text-red-700">
Failed
</span>
</td>
<td class="px-3 py-2 whitespace-nowrap">$30.00</td>
<td class="px-3 py-2 whitespace-nowrap">
<a href="#" class="font-medium text-gray-900 underline underline-offset-2">
Download
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
</div>
<script>
const sidebarToggleCheckbox = document.getElementById('sidebar-toggle')
const sidebarToggleLabel = document.getElementById('sidebar-toggle-label')
sidebarToggleCheckbox.addEventListener('change', () => {
sidebarToggleLabel.setAttribute('aria-expanded', String(sidebarToggleCheckbox.checked))
})
</script><input type="checkbox" id="sidebar-toggle" class="peer sr-only" />
<label
for="sidebar-toggle"
aria-hidden="true"
class="fixed inset-0 z-30 hidden bg-gray-900/50 peer-checked:block lg:hidden"
></label>
<div
id="dashboard-sidebar"
class="fixed inset-y-0 start-0 z-40 flex w-64 -translate-x-full flex-col justify-between overflow-y-auto border-e border-gray-200 bg-white transition-transform duration-300 peer-checked:translate-x-0 lg:static lg:translate-x-0 lg:shrink-0"
>
<div class="p-4">
<span
class="grid h-12 w-32 place-content-center rounded-lg bg-gray-100 text-sm text-gray-600"
>
Logo
</span>
<nav aria-label="Dashboard" class="mt-4">
<ul class="space-y-1">
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Overview
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Customers
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Orders
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
>
Billing
</a>
</li>
<li>
<a
href="#"
class="block rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-900"
>
Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="sticky inset-x-0 bottom-0 border-t border-gray-200">
<a
href="#"
class="flex items-center gap-2 bg-white p-4 hover:bg-gray-50 hover:transition-colors"
>
<img
alt=""
src="https://images.unsplash.com/photo-1600486913747-55e5470d6f40?auto=format&fit=crop&q=80&w=1160"
class="size-10 rounded-full object-cover"
/>
<p class="text-xs text-gray-900">
<strong class="block font-medium">Priya Natarajan</strong>
<span>priya@orbitly.com</span>
</p>
</a>
</div>
</div>
<div class="flex flex-1 flex-col overflow-y-auto">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-4">
<div class="flex items-center gap-4">
<label
for="sidebar-toggle"
id="sidebar-toggle-label"
aria-expanded="false"
aria-controls="dashboard-sidebar"
class="cursor-pointer rounded-md p-2 text-gray-600 transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-gray-900 peer-focus-visible:ring-offset-2 hover:bg-gray-100 lg:hidden"
>
<span class="sr-only">Toggle menu</span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</label>
<h1 class="text-lg font-semibold text-gray-900">Settings</h1>
</div>
<button
type="submit"
form="account-settings-form"
class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800"
>
Save changes
</button>
</header>
<main class="flex-1 space-y-6 p-6">
<form id="account-settings-form" class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Profile</h2>
<div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700">
Full name
</label>
<input
type="text"
id="full-name"
value="Priya Natarajan"
class="mt-1 w-full rounded-md border-gray-200 text-sm text-gray-900 shadow-xs"
/>
</div>
<div>
<label for="email-address" class="block text-sm font-medium text-gray-700">
Email address
</label>
<input
type="email"
id="email-address"
value="priya@orbitly.com"
class="mt-1 w-full rounded-md border-gray-200 text-sm text-gray-900 shadow-xs"
/>
</div>
<div class="sm:col-span-2">
<label for="team-name" class="block text-sm font-medium text-gray-700">
Team name
</label>
<input
type="text"
id="team-name"
value="Orbitly"
class="mt-1 w-full rounded-md border-gray-200 text-sm text-gray-900 shadow-xs"
/>
</div>
</div>
</form>
<div class="rounded-lg border border-gray-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Notifications</h2>
<ul class="mt-4 divide-y divide-gray-200">
<li class="flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0">
<div>
<p class="text-sm font-medium text-gray-900">Email notifications</p>
<p class="text-xs text-gray-600">Get notified when a customer places an order.</p>
</div>
<label
for="email-notifications-toggle"
class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-gray-200 transition has-checked:bg-indigo-600"
>
<input
type="checkbox"
id="email-notifications-toggle"
checked
class="peer sr-only"
/>
<span
class="size-4 translate-x-1 rounded-full bg-white transition peer-checked:translate-x-6"
></span>
</label>
</li>
<li class="flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0">
<div>
<p class="text-sm font-medium text-gray-900">Product updates</p>
<p class="text-xs text-gray-600">Occasional emails about new features.</p>
</div>
<label
for="product-updates-toggle"
class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-gray-200 transition has-checked:bg-indigo-600"
>
<input type="checkbox" id="product-updates-toggle" class="peer sr-only" />
<span
class="size-4 translate-x-1 rounded-full bg-white transition peer-checked:translate-x-6"
></span>
</label>
</li>
<li class="flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0">
<div>
<p class="text-sm font-medium text-gray-900">Weekly summary</p>
<p class="text-xs text-gray-600">A digest of revenue and orders every Monday.</p>
</div>
<label
for="weekly-summary-toggle"
class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-gray-200 transition has-checked:bg-indigo-600"
>
<input
type="checkbox"
id="weekly-summary-toggle"
checked
class="peer sr-only"
/>
<span
class="size-4 translate-x-1 rounded-full bg-white transition peer-checked:translate-x-6"
></span>
</label>
</li>
</ul>
</div>
<div class="rounded-lg border border-red-200 bg-white p-6">
<h2 class="text-sm font-medium text-gray-900">Danger zone</h2>
<p class="mt-2 text-sm text-gray-600">
Deleting your team removes all customers, orders, and billing history. This cannot be
undone.
</p>
<button
type="button"
class="mt-4 inline-block rounded-md border border-red-200 px-4 py-2 text-sm font-medium text-red-700 transition hover:bg-red-50"
>
Delete team
</button>
</div>
</main>
</div>
<script>
const sidebarToggleCheckbox = document.getElementById('sidebar-toggle')
const sidebarToggleLabel = document.getElementById('sidebar-toggle-label')
sidebarToggleCheckbox.addEventListener('change', () => {
sidebarToggleLabel.setAttribute('aria-expanded', String(sidebarToggleCheckbox.checked))
})
</script>