Stats Card Dashboard Using Tailwind UI
A stats card dashboard designed with Tailwind offers an aesthetically pleasing and organized display of essential statistics and data, enabling users to quickly assess and monitor key metrics.
stats
Loading component...
120 lines
<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=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<!-- inspired design by https://dribbble.com/shots/6571545-Inspection-report -->
<section class="flex items-center justify-center">
<div class="mt-24">
<div class="grid justify-center max-w-screen-xl gap-4 p-4 mx-auto sm:grid-cols-2 lg:grid-cols-4 ">
<div class="flex items-start max-w-md px-6 py-8 border border-b-8 border-green-500 rounded-lg">
<div class="inline-block p-4 mr-4 bg-green-200 rounded-full text-emerald-500">
<img class="w-12 h-12" src="https://cdn-icons-png.flaticon.com/128/11134/11134474.png"
alt="running icon">
</div>
<div>
<p class="mb-2 text-base font-semibold text-gray-500">Motor gene</p>
<p class="mb-8 text-6xl font-bold text-gray-800">27 <span class="text-lg font-medium">items</span>
</p>
<a class="flex items-center text-sm" href="#">
<span class="mr-4 text-blue-500 hover:text-blue-800">See more</span>
<span class="p-1 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</span>
</a>
</div>
</div>
<div class="flex items-start max-w-md px-6 py-8 border rounded-lg hover:border-b-8 hover:border-pink-500">
<div class="inline-block p-4 mr-4 bg-pink-200 rounded-full text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-12 h-12 text-pink-500">
<path fill-rule="evenodd"
d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
</div>
<div>
<p class="mb-2 text-base font-semibold text-gray-500">Ansentral source</p>
<p class="mb-8 text-6xl font-bold text-gray-800">17 <span class="text-lg font-medium">items</span>
</p>
<a class="flex items-center text-sm" href="#">
<span class="mr-4 text-blue-500 hover:text-blue-800">See more</span>
<span class="p-1 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</span>
</a>
</div>
</div>
<div class="flex items-start max-w-md px-6 py-8 border rounded-lg hover:border-b-8 hover:border-red-500">
<div class="inline-block p-4 mr-4 bg-red-200 rounded-full text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
class="w-12 h-12 text-red-600">
<path
d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
</svg>
</div>
<div>
<p class="mb-2 text-base font-semibold text-gray-500">Health risk</p>
<p class="mb-8 text-6xl font-bold text-gray-800">67 <span class="text-lg font-medium">items</span>
</p>
<a class="flex items-center text-sm" href="#">
<span class="mr-4 text-blue-500 hover:text-blue-800">See more</span>
<span class="p-1 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</span>
</a>
</div>
</div>
<div class="flex items-start max-w-md px-6 py-8 border rounded-lg hover:border-b-8 hover:border-blue-500">
<div class="inline-block p-4 mr-4 bg-blue-200 rounded-full text-emerald-500">
<img class="w-12 h-12" src="https://cdn-icons-png.flaticon.com/128/11580/11580456.png"
alt="psychological icon">
</div>
<div>
<p class="mb-2 text-base font-semibold text-gray-500">Psychological trait</p>
<p class="mb-8 text-6xl font-bold text-gray-800">7 <span class="text-lg font-medium">items</span>
</p>
<a class="flex items-center text-sm" href="#">
<span class="mr-4 text-blue-500 hover:text-blue-800">See more</span>
<span class="p-1 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
</section>