Free TailwindUI Stats Components
Explore a complete collection of free TailwindUI stats components https://tailwindui.com/components/application-ui/data-display/stats on BardUI to visually showcase key data and analytics. Choose from simple designs, dark mode, card-based layouts, brand icons, and shared borders to enhance your web project's data presentation.
Last 1 week agoPreview
Code
HTML
React
<div class="max-w-6xl mx-auto px-2 my-8">
<!-- first stats -->
<dl
class="mt-5 grid grid-cols-1 divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow md:grid-cols-3 md:divide-x md:divide-y-0">
<div class="px-4 py-5 sm:p-6">
<dt class="text-base font-normal text-gray-900">Total Subscribers</dt>
<dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
<div class="flex items-baseline text-2xl font-semibold text-indigo-600">
71,897
<span class="ml-2 text-sm font-medium text-gray-500">from 70,946</span>
</div>
<div
class="inline-flex items-baseline rounded-full bg-green-100 px-2.5 py-0.5 text-sm font-medium text-green-800 md:mt-2 lg:mt-0">
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd" />
</svg>
<span class="sr-only"> Increased by </span>
12%
</div>
</dd>
</div>
<div class="px-4 py-5 sm:p-6">
<dt class="text-base font-normal text-gray-900">Avg. Open Rate</dt>
<dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
<div class="flex items-baseline text-2xl font-semibold text-indigo-600">
58.16%
<span class="ml-2 text-sm font-medium text-gray-500">from 56.14%</span>
</div>
<div
class="inline-flex items-baseline rounded-full bg-green-100 px-2.5 py-0.5 text-sm font-medium text-green-800 md:mt-2 lg:mt-0">
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd" />
</svg>
<span class="sr-only"> Increased by </span>
2.02%
</div>
</dd>
</div>
<div class="px-4 py-5 sm:p-6">
<dt class="text-base font-normal text-gray-900">Avg. Click Rate</dt>
<dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
<div class="flex items-baseline text-2xl font-semibold text-indigo-600">
24.57%
<span class="ml-2 text-sm font-medium text-gray-500">from 28.62%</span>
</div>
<div
class="inline-flex items-baseline rounded-full bg-red-100 px-2.5 py-0.5 text-sm font-medium text-red-800 md:mt-2 lg:mt-0">
<svg class="-ml-1 mr-0.5 h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
clip-rule="evenodd" />
</svg>
<span class="sr-only"> Decreased by </span>
4.05%
</div>
</dd>
</div>
</dl>
<!-- second stats -->
<div class="mt-8">
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<dt class="truncate text-sm font-medium text-gray-500">Total Subscribers</dt>
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">71,897</dd>
</div>
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<dt class="truncate text-sm font-medium text-gray-500">Avg. Open Rate</dt>
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">58.16%</dd>
</div>
<div class="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6">
<dt class="truncate text-sm font-medium text-gray-500">Avg. Click Rate</dt>
<dd class="mt-1 text-3xl font-semibold tracking-tight text-gray-900">24.57%</dd>
</div>
</dl>
</div>
<!-- thired stats -->
<div class="mt-6">
<dl class="mx-auto grid grid-cols-1 gap-px bg-gray-900/5 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 py-10 sm:px-6 xl:px-8">
<dt class="text-sm font-medium leading-6 text-gray-500">Revenue</dt>
<dd class="text-xs font-medium text-gray-700">+4.75%</dd>
<dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">$405,091.00</dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 py-10 sm:px-6 xl:px-8">
<dt class="text-sm font-medium leading-6 text-gray-500">Overdue invoices</dt>
<dd class="text-xs font-medium text-rose-600">+54.02%</dd>
<dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">$12,787.00</dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 py-10 sm:px-6 xl:px-8">
<dt class="text-sm font-medium leading-6 text-gray-500">Outstanding invoices</dt>
<dd class="text-xs font-medium text-gray-700">-1.39%</dd>
<dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">$245,988.00</dd>
</div>
<div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 py-10 sm:px-6 xl:px-8">
<dt class="text-sm font-medium leading-6 text-gray-500">Expenses</dt>
<dd class="text-xs font-medium text-rose-600">+10.18%</dd>
<dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">$30,156.00</dd>
</div>
</dl>
</div>
<!-- forth stats -->
<div class="mt-8">
<dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
<dt>
<div class="absolute rounded-md bg-indigo-500 p-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
</svg>
</div>
<p class="ml-16 truncate text-sm font-medium text-gray-500">Total Subscribers</p>
</dt>
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
<p class="text-2xl font-semibold text-gray-900">71,897</p>
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd" />
</svg>
<span class="sr-only"> Increased by </span>
122
</p>
<div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">View
all<span class="sr-only"> Total Subscribers stats</span></a>
</div>
</div>
</dd>
</div>
<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
<dt>
<div class="absolute rounded-md bg-indigo-500 p-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z" />
</svg>
</div>
<p class="ml-16 truncate text-sm font-medium text-gray-500">Avg. Open Rate</p>
</dt>
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
<p class="text-2xl font-semibold text-gray-900">58.16%</p>
<p class="ml-2 flex items-baseline text-sm font-semibold text-green-600">
<svg class="h-5 w-5 flex-shrink-0 self-center text-green-500" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd" />
</svg>
<span class="sr-only"> Increased by </span>
5.4%
</p>
<div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">View
all<span class="sr-only"> Avg. Open Rate stats</span></a>
</div>
</div>
</dd>
</div>
<div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
<dt>
<div class="absolute rounded-md bg-indigo-500 p-3">
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59" />
</svg>
</div>
<p class="ml-16 truncate text-sm font-medium text-gray-500">Avg. Click Rate</p>
</dt>
<dd class="ml-16 flex items-baseline pb-6 sm:pb-7">
<p class="text-2xl font-semibold text-gray-900">24.57%</p>
<p class="ml-2 flex items-baseline text-sm font-semibold text-red-600">
<svg class="h-5 w-5 flex-shrink-0 self-center text-red-500" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
clip-rule="evenodd" />
</svg>
<span class="sr-only"> Decreased by </span>
3.2%
</p>
<div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">View
all<span class="sr-only"> Avg. Click Rate stats</span></a>
</div>
</div>
</dd>
</div>
</dl>
</div>
<!-- Last fifth stats -->
<div class="bg-gray-900 mt-8">
<div class="mx-auto max-w-7xl">
<div class="grid grid-cols-1 gap-px bg-white/5 sm:grid-cols-2 lg:grid-cols-4">
<div class="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-400">Number of deploys</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight text-white">405</span>
</p>
</div>
<div class="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-400">Average deploy time</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight text-white">3.65</span>
<span class="text-sm text-gray-400">mins</span>
</p>
</div>
<div class="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-400">Number of servers</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight text-white">3</span>
</p>
</div>
<div class="bg-gray-900 px-4 py-6 sm:px-6 lg:px-8">
<p class="text-sm font-medium leading-6 text-gray-400">Success rate</p>
<p class="mt-2 flex items-baseline gap-x-2">
<span class="text-4xl font-semibold tracking-tight text-white">98.5%</span>
</p>
</div>
</div>
</div>
</div>
</div>
saqlain Aly
11 components