[ Component ]
Metrics Card
How to use → · metrics· stats
Copy as
<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-2xl bg-white shadow-xl w-80 relative p-4">
<div class="relative rounded-2xl overflow-hidden -mt-10 shadow-lg bg-white"><input type="text" placeholder="Search" class="p-3 w-full pr-10"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="absolute right-0 mr-4 top-0 mt-4 cursor-pointer">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
</svg></div>
<div class="flex items-center mt-6 text-sm">
<div class="p-3 rounded-2xl bg-green-100 text-green-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1a2.5 2.5 0 0 0-2.5 2.5V4h5v-.5A2.5 2.5 0 0 0 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z" />
</svg></div>
<div class="flex-1 px-2">
<div class="flex justify-between"><span>Total Orders</span> <span>87</span></div>
<div class="rounded-full h-1 bg-gray-200 relative">
<div class="rounded-full h-1 bg-green-400 w-10/12"></div>
</div>
</div>
</div>
<div class="flex items-center mt-4 text-sm">
<div class="p-3 rounded-2xl bg-red-100 text-red-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cloud-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z" />
</svg></div>
<div class="flex-1 px-2">
<div class="flex justify-between"><span>Online Orders</span> <span>21</span></div>
<div class="rounded-full h-1 bg-gray-200 relative">
<div class="rounded-full h-1 bg-red-400 w-4/12"></div>
</div>
</div>
</div>
<div class="flex items-center mt-4 text-sm">
<div class="p-3 rounded-2xl bg-purple-100 text-purple-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v2h6a.5.5 0 0 1 .5.5c0 .253.08.644.306.958.207.288.557.542 1.194.542.637 0 .987-.254 1.194-.542.226-.314.306-.705.306-.958a.5.5 0 0 1 .5-.5h6v-2A1.5 1.5 0 0 0 14.5 2h-13z" />
<path d="M16 6.5h-5.551a2.678 2.678 0 0 1-.443 1.042C9.613 8.088 8.963 8.5 8 8.5c-.963 0-1.613-.412-2.006-.958A2.679 2.679 0 0 1 5.551 6.5H0v6A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-6z" />
</svg></div>
<div class="flex-1 px-2">
<div class="flex justify-between"><span>Cash Balance</span> <span>$4,320</span></div>
<div class="rounded-full h-1 bg-gray-200 relative">
<div class="rounded-full h-1 bg-purple-400 w-11/12"></div>
</div>
</div>
</div>
</div>
</div>