[ Component ]
Statistics Card
How to use → · stats
Copy as
<div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
<div class="rounded-xl bg-white w-full max-w-xl shadow-md overflow-hidden">
<h1 class="text-lg font-medium px-6 py-4">Statistics</h1>
<ul class="px-4 mb-4 grid grid-cols-3 gap-1">
<li class="p-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16" class="mr-2 rounded-lg bg-blue-100 text-blue-500 p-3">
<path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z" />
</svg>
<div>
<div class="font-semibold">$ 32,677</div>
<p class="text-gray-300 text-sm">Revenue</p>
</div>
</li>
<li class="p-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16" class="mr-2 rounded-lg bg-green-100 text-green-500 p-3">
<path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" />
<path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z" />
</svg>
<div>
<div class="font-semibold">1,247</div>
<p class="text-gray-300 text-sm">Orders</p>
</div>
</li>
<li class="p-2 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16" class="mr-2 rounded-lg bg-pink-100 text-pink-500 p-3">
<path d="M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0zM4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
</svg>
<div>
<div class="font-semibold">82%</div>
<p class="text-gray-300 text-sm">Conversion Rate</p>
</div>
</li>
</ul>
</div>
</div>