Simple Stats Section Using Tailwind UI
A simple stats section designed with Tailwind offers a minimalist yet effective way to present key statistics or data, ensuring clear and concise information display.
stats
Loading component...
55 lines
<!-- Component Inspired design by https://dribbble.com/shots/15214143-Stats-UI-Design -->
<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>
<div class="sm:h-screen flex flex-col justify-center w-full items-center text-[#090B2E] bg-[#EEEFF9]">
<card class="flex flex-col w-full p-8 mx-auto space-y-8 text-gray-900 bg-white shadow-xl sm:max-w-xl rounded-xl">
<div>
<h1 class="mb-2 text-4xl font-semibold ">Your stats in February</h1>
<p class="text-sm font-semibold">
Tank you for sharing with the community!
</p>
</div>
<div
class="flex flex-col items-center justify-center space-x-0 space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
<div
class="flex flex-col items-start w-full p-4 rounded-sm sm:w-1/3 sm:p-8 bg-gradient-to-bl from-red-100 to-red-300">
<h2 class="mb-12 text-sm font-semibold uppercase">views</h2>
<div class="">
<h1 class="mb-2 text-4xl font-bold">477</h1>
<span class="text-sm font-medium text-gray-500">+29<br>views</span>
</div>
</div>
<div
class="flex flex-col items-start w-full p-4 rounded-sm sm:w-1/3 sm:p-8 bg-gradient-to-bl from-blue-100 to-blue-300">
<h2 class="mb-12 text-sm font-semibold uppercase">Likes</h2>
<div class="">
<h1 class="mb-2 text-4xl font-bold">4</h1>
<span class="text-sm font-medium text-gray-500">+1<br>likes</span>
</div>
</div>
<div
class="flex flex-col items-start w-full p-4 rounded-sm sm:w-1/3 sm:p-8 bg-gradient-to-bl from-green-100 to-green-300">
<h2 class="mb-12 text-sm font-semibold uppercase">Downloads</h2>
<div class="">
<h1 class="mb-2 text-4xl font-bold">7</h1>
<span class="text-sm font-medium text-gray-500">+2<br>downloads</span>
</div>
</div>
</div>
<button type="button"
class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Keep
Sharing
</button>
</card>
</div>