Card Statistic for Dashboard Finance Using Tailwind UI
Elevate your financial insights with a meticulously crafted user dashboard featuring dynamic statistic cards, all beautifully designed using Tailwind CSS. inspiration design by Jordan Hughes from Dribbble.
card
Loading component...
92 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>
<div class="container items-center px-4 py-8 m-auto mt-5">
<div class="flex flex-wrap pb-3 mx-4 md:mx-24 lg:mx-0">
<div class="w-full p-2 lg:w-1/4 md:w-1/2">
<div class="flex flex-col p-6 overflow-hidden duration-300 bg-purple-500 shadow-lg rounded-xl hover:shadow-2xl">
<div class="flex items-center justify-center w-12 h-12 mb-6 bg-white rounded-xl">
<svg class="w-6 h-6 my-auto text-purple-500" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25">
</path>
</svg>
</div>
<div class="p-4 bg-white border border-white border-opacity-50 bg-opacity-40 rounded-xl">
<h4 class="text-lg font-semibold text-purple-50">Home deposit</h4>
<h1 class="mt-2 text-3xl font-bold text-white">$64,240.60</h1>
<div class="w-full h-2 mt-4 bg-purple-200 rounded-md hover:bg-gray-300">
<div class="h-2 bg-purple-500 rounded-md" style="width: 50%"></div>
</div>
</div>
</div>
</div>
<div class="w-full p-2 lg:w-1/4 md:w-1/2">
<div class="flex flex-col p-6 overflow-hidden duration-300 bg-green-500 shadow-lg rounded-xl hover:shadow-2xl">
<div class="flex items-center justify-center w-12 h-12 mb-6 bg-white rounded-xl">
<svg class="w-6 h-6 my-auto text-green-500" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z">
</path>
</svg>
</div>
<div class="p-4 bg-white border border-white border-opacity-50 bg-opacity-40 rounded-xl">
<h4 class="text-lg font-semibold text-green-50">Holiday</h4>
<h1 class="mt-2 text-3xl font-bold text-white">$2,200.42</h1>
<div class="w-full h-2 mt-4 bg-green-200 rounded-md hover:bg-gray-300">
<div class="h-2 bg-green-500 rounded-md" style="width: 90%"></div>
</div>
</div>
</div>
</div>
<div class="w-full p-2 lg:w-1/4 md:w-1/2">
<div class="flex flex-col p-6 overflow-hidden duration-300 bg-blue-500 shadow-lg rounded-xl hover:shadow-2xl">
<div class="flex items-center justify-center w-12 h-12 mb-6 bg-white rounded-xl">
<svg class="w-6 h-6 my-auto text-blue-500" fill="none" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
</div>
<div class="p-4 bg-white border border-white border-opacity-50 bg-opacity-40 rounded-xl">
<h4 class="text-lg font-semibold text-blue-50">Savings</h4>
<h1 class="mt-2 text-3xl font-bold text-white">$41,382.80</h1>
<div class="w-full h-2 mt-4 bg-blue-200 rounded-md hover:bg-gray-300">
<div class="h-2 bg-blue-500 rounded-md" style="width: 70%"></div>
</div>
</div>
</div>
</div>
<div class="w-full p-2 lg:w-1/4 md:w-1/2">
<div class="flex flex-col p-6 overflow-hidden duration-300 bg-red-500 shadow-lg rounded-xl hover:shadow-2xl">
<div class="flex items-center justify-center w-12 h-12 mb-6 bg-white rounded-xl">
<svg class="w-6 h-6 my-auto text-red-500" fill="currentColor" stroke="currentColor" stroke-width="1.5"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z">
</path>
</svg>
</div>
<div class="p-4 bg-white border border-white border-opacity-50 bg-opacity-40 rounded-xl">
<h4 class="text-lg font-semibold text-red-50">Healthy</h4>
<h1 class="mt-2 text-3xl font-bold text-white">$90,105.99</h1>
<div class="w-full h-2 mt-4 bg-red-200 rounded-md">
<div class="h-2 bg-red-500 rounded-md" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</div>
</div>