<div class="p-10">
<div class="border border-gray-200 rounded-xl shadow-sm bg-white dark:bg-gray-800 p-8 mb-6">
<header class="text-lg font-semibold text-gray-700 dark:text-gray-200 rounded-sm">Overview</header>
<div class="flex flex-wrap gap-x-16 text-sm text-gray-600 mt-4">
<div>
<div class="opacity-70 text-sm">Words limit</div>
<div class="text-gray-700 text-2xl font-semibold">Unlimited</div>
</div>
<div>
<div class="opacity-70 text-sm">Image limit</div>
<div class="text-gray-700 text-2xl font-semibold">27,400</div>
</div>
<div class="flex-1">
<div class="opacity-70 text-sm">Used token</div>
<div class="flex w-full h-2 bg-gray-100 mt-2 rounded-full overflow-hidden dark:bg-gray-700">
<div class="flex flex-col justify-center overflow-hidden bg-orange-400" role="progressbar" style="width: 65%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
<div class="flex flex-col justify-center overflow-hidden bg-amber-400" role="progressbar" style="width: 35%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
tailwind.config = {darkMode: "class",theme: {extend: {fontFamily: {sans: ["Inter", "sans-serif"]}}}}
This Stat page, built using the powerful Tailwind CSS Framework, can be utilized across various web development projects where presenting data in a visually appealing and informative manner is crucial. Whether it's a business analytics dashboard, a sports statistics website, or a community health tracking platform, this responsive and customizable Stat page offers a wide range of applications. With its sleek design and seamless integration, this page provides an excellent solution for showcasing and analyzing data across different industries and sectors.