Stats
Use one of these precomposed stats sections to show off some numbers.
Stats section 1
<div class="text-gray-900 font-sans">
<div class="container py-20 lg:py-32">
<div class="text-center">
<h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Elit Condimentum Purus Justo Fermentum</h2>
<p class="mt-2 text-gray-700 text-lg md:mt-4">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="-mx-4 sm:flex sm:flex-wrap sm:items-start sm:justify-center md:mt-8">
<div class="p-4 w-full text-center sm:w-1/2 md:w-1/3">
<dl class="flex flex-col-reverse items-center">
<dt class="mt-2 text-gray-700 md:mt-4">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-6xl font-bold md:text-7xl">97</dd>
</dl>
</div>
<div class="p-4 w-full text-center sm:w-1/2 md:w-1/3">
<dl class="flex flex-col-reverse items-center">
<dt class="mt-2 text-gray-700 md:mt-4">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-6xl font-bold md:text-7xl">100</dd>
</dl>
</div>
<div class="p-4 w-full text-center sm:w-1/2 md:w-1/3">
<dl class="flex flex-col-reverse items-center">
<dt class="mt-2 text-gray-700 md:mt-4">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-6xl font-bold md:text-7xl">38</dd>
</dl>
</div>
</div>
</div>
</div>
Stats section 2
<div class="text-gray-900 font-sans">
<div class="container py-20 lg:py-32">
<div class="-mx-4 pb-4 flex flex-col items-center md:pb-12 md:flex-row">
<div class="p-4 text-center md:w-2/3 md:text-left">
<h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Elit Condimentum Purus Justo Fermentum</h2>
<p class="mt-2 text-gray-700 text-lg md:mt-4">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="p-4 w-full sm:w-2/3 md:w-1/3 md:mt-0">
<div class="relative w-full h-40 bg-gray-800">
<img
src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="People computing stats"
class="absolute object-cover w-full h-full"
>
</div>
</div>
</div>
<div class="border-t-3 border-gray-700 md:pt-8">
<div class="-mx-4 sm:flex sm:flex-wrap sm:items-start sm:justify-center">
<div class="p-4 w-full text-center sm:w-1/2 md:w-1/3">
<dl class="flex flex-col-reverse items-center">
<dt class="mt-2 text-gray-700 md:mt-4">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-6xl font-bold md:text-7xl">97</dd>
</dl>
</div>
<div class="p-4 w-full text-center sm:w-1/2 md:w-1/3">
<dl class="flex flex-col-reverse items-center">
<dt class="mt-2 text-gray-700 md:mt-4">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-6xl font-bold md:text-7xl">100</dd>
</dl>
</div>
<div class="p-4 w-full text-center sm:w-1/2 md:w-1/3">
<dl class="flex flex-col-reverse items-center">
<dt class="mt-2 text-gray-700 md:mt-4">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-6xl font-bold md:text-7xl">38</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
Stats section 3
<div class="text-gray-900 font-sans">
<div class="container py-20">
<div class="divide-y-2 divide-gray-600 space-y-4 md:space-y-0">
<div class="-mx-4 flex flex-col items-center md:py-8 md:flex-row lg:py-12">
<div class="p-4 text-center md:w-1/2 md:text-left">
<h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Elit Condimentum Purus Justo Fermentum</h2>
<p class="mt-2 text-gray-700 md:mt-4 lg:mt-6 lg:text-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="p-4 flex justify-center md:w-1/2">
<dl class="max-w-xs px-4 flex flex-col-reverse items-center text-center md:items-start md:text-left">
<dt class="mt-2 text-gray-700 font-bold md:mt-4 md:text-lg">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-7xl leading-none md:text-8xl lg:text-9xl">97</dd>
</dl>
</div>
</div>
<div class="-mx-4 flex flex-col items-center md:py-8 md:flex-row-reverse lg:py-12">
<div class="p-4 text-center md:w-1/2 md:text-left">
<h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Elit Condimentum Purus Justo Fermentum</h2>
<p class="mt-2 text-gray-700 md:mt-4 lg:mt-6 lg:text-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="p-4 flex justify-center md:w-1/2">
<dl class="max-w-xs px-4 flex flex-col-reverse items-center text-center md:items-start md:text-left">
<dt class="mt-2 text-gray-700 font-bold md:mt-4 md:text-lg">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-7xl leading-none md:text-8xl lg:text-9xl">100</dd>
</dl>
</div>
</div>
<div class="-mx-4 flex flex-col items-center md:py-8 md:flex-row lg:py-12">
<div class="p-4 text-center md:w-1/2 md:text-left">
<h2 class="text-xl font-bold md:text-2xl lg:text-3xl">Elit Condimentum Purus Justo Fermentum</h2>
<p class="mt-2 text-gray-700 md:mt-4 lg:mt-6 lg:text-lg">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div class="p-4 flex justify-center md:w-1/2">
<dl class="max-w-xs px-4 flex flex-col-reverse items-center text-center md:items-start md:text-left">
<dt class="mt-2 text-gray-700 font-bold md:mt-4 md:text-lg">Elit Condimentum Purus Justo Fermentum</dt>
<dd class="text-7xl leading-none md:text-8xl lg:text-9xl">38</dd>
</dl>
</div>
</div>
</div>
</div>
</div>