Stats
Ready to use Tailwind CSS stat components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Sometimes the most convincing thing you can do is just show the numbers. Stats sections are good for that, a few key metrics that tell your story faster than paragraphs ever could. We have a handful of layouts: a simple row of three or four numbers, a big centered callout, stats with icons alongside them, and one that mixes the numbers with a short paragraph for context. They're all static HTML so you just swap in your real numbers. If you want a count-up animation you can layer that on yourself.
Tailwind
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">The impact we’ve made</h2>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-center sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-600">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">98%</dd>
</div>
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-600">Global user base</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">28M</dd>
</div>
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-600">Expert team members</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">150+</dd>
</div>
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-600">Rapid business growth</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">320%</dd>
</div>
</dl>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">The impact we’ve made</h2>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-center sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-300">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-5xl">98%</dd>
</div>
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-300">Global user base</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-5xl">28M</dd>
</div>
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-300">Expert team members</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-5xl">150+</dd>
</div>
<div class="flex flex-col gap-y-2">
<dt class="text-base leading-7 text-gray-300">Rapid business growth</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-5xl">320%</dd>
</div>
</dl>
</div>
</div><div class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
<img class="absolute left-0 top-0 -z-10 h-full w-full object-cover" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2850&q=80&blend=111827&blend-mode=multiply&sat=-100&exp=15" alt="" />
<div class="relative isolate mx-auto max-w-7xl px-6 lg:px-8">
<div aria-hidden="true" class="absolute left-1/2 top-1/2 -z-10 -translate-x-1/2 -translate-y-1/2 blur-3xl">
<div class="aspect-[2/1] w-[80rem] bg-gradient-to-bl from-pink-500 to-violet-500 opacity-20" style="clip-path: polygon(62% 38%, 100% 74%, 86% 0, 58% 17%, 49% 80%, 39% 38%, 39% 3%, 11% 100%, 0 59%, 64% 100%)"></div>
</div>
<h2 class="mx-auto max-w-2xl text-base font-semibold leading-7 text-pink-500 lg:max-w-none">Our achievements</h2>
<div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-6 lg:max-w-none lg:grid-cols-2">
<div>
<p class="mt-2 text-4xl font-semibold tracking-tight text-white sm:text-5xl">Fueling innovation and growth for businesses</p>
</div>
<div>
<p class="text-lg leading-8 text-gray-300">Our platform is trusted by companies of all sizes to streamline operations, boost productivity, and deliver superior results.</p>
<a href="#" class="mt-8 inline-block rounded-md bg-pink-500 px-6 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
</div>
</div>
<dl class="mx-auto mt-20 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-base leading-7 text-gray-300">Verified users</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white">2M+</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-base leading-7 text-gray-300">supported account</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white">1.5M</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-base leading-7 text-gray-300">Rating</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white">5.0</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-white/10 pl-6">
<dt class="text-base leading-7 text-gray-300">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white">98%</dd>
</div>
</dl>
</div>
</div><div class="relative bg-white">
<img class="h-56 w-full bg-gray-50 object-cover lg:absolute lg:inset-y-0 lg:right-0 lg:h-full lg:w-1/2" src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=2850&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
<div class="mx-auto grid max-w-7xl grid-cols-1 lg:grid-cols-2">
<div class="px-6 pb-24 pt-16 sm:pb-32 sm:pt-20 lg:px-8 lg:pt-32">
<div class="mx-auto max-w-2xl lg:ml-0 lg:max-w-lg">
<h2 class="text-base font-semibold leading-7 text-pink-500">Our achievements</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Fueling innovation and growth for businesses</p>
<p class="mt-6 text-lg leading-8 text-gray-600">Our platform is trusted by companies of all sizes to streamline operations, boost productivity, and deliver superior results.</p>
<a href="#" class="mt-8 inline-block rounded-md bg-pink-500 px-6 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none">
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-base leading-7 text-gray-600">Verified users</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">2M+</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-base leading-7 text-gray-600">supported account</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">1.5M</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-base leading-7 text-gray-600">Rating</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">5.0</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6">
<dt class="text-base leading-7 text-gray-600">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">98%</dd>
</div>
</dl>
</div>
</div>
</div>
</div><div class="relative isolate overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="mx-auto max-w-2xl text-base font-semibold leading-7 text-pink-500 lg:max-w-none">About us</h2>
<div class="mx-auto mt-2 grid max-w-2xl grid-cols-1 gap-x-12 gap-y-6 lg:max-w-none lg:grid-cols-2">
<div>
<p class="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Discover more about our powerful platform</p>
</div>
<div>
<p class="text-lg leading-8 text-gray-600">We are a customer-focused platform offering a comprehensive suite of tools designed to streamline operations, boost productivity, and meet the evolving needs of businesses in the digital age.</p>
</div>
</div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-3 rounded-2xl bg-gray-50 px-8 py-12 text-center">
<dt class="text-pretty text-base leading-7 text-gray-600">Users from across the globe and diverse industries</dt>
<dd class="order-first text-5xl font-semibold tracking-tight text-gray-900">243K</dd>
</div>
<div class="flex flex-col gap-y-3 rounded-2xl bg-gray-50 px-8 py-12 text-center">
<dt class="text-pretty text-base leading-7 text-gray-600">Customer satisfaction rate achieved</dt>
<dd class="order-first text-5xl font-semibold tracking-tight text-gray-900">98%</dd>
</div>
<div class="flex flex-col gap-y-3 rounded-2xl bg-gray-50 px-8 py-12 text-center">
<dt class="text-pretty text-base leading-7 text-gray-600">Revenue generated in the first quarter of 2024</dt>
<dd class="order-first text-5xl font-semibold tracking-tight text-gray-900">489M</dd>
</div>
<div class="flex flex-col gap-y-3 rounded-2xl bg-gray-50 px-8 py-12 text-center">
<dt class="text-pretty text-base leading-7 text-gray-600">Growth in investment during 2024</dt>
<dd class="order-first text-5xl font-semibold tracking-tight text-gray-900">267%</dd>
</div>
</dl>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-y-16 text-center lg:grid-cols-3">
<div class="flex flex-col gap-y-2 lg:border-r border-gray-900/10 px-8">
<dt class="text-base leading-7 text-gray-600">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">98%</dd>
</div>
<div class="flex flex-col gap-y-2 lg:border-r border-gray-900/10 px-8">
<dt class="text-base leading-7 text-gray-600">Global user base</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">28M</dd>
</div>
<div class="flex flex-col gap-y-2 px-8">
<dt class="text-base leading-7 text-gray-600">Expert team members</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900 sm:text-6xl">150+</dd>
</div>
</dl>
</div>
</div><div class="bg-gray-900 py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-y-16 text-center lg:grid-cols-3">
<div class="flex flex-col gap-y-2 lg:border-r border-white/20 px-8">
<dt class="text-base leading-7 text-gray-300">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-6xl">98%</dd>
</div>
<div class="flex flex-col gap-y-2 lg:border-r border-white/20 px-8">
<dt class="text-base leading-7 text-gray-300">Global user base</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-6xl">28M</dd>
</div>
<div class="flex flex-col gap-y-2 px-8">
<dt class="text-base leading-7 text-gray-300">Expert team members</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-white sm:text-6xl">150+</dd>
</div>
</dl>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="mx-auto max-w-2xl text-pretty text-base font-semibold leading-7 text-pink-500 lg:max-w-none">Our achievements</h2>
<div class="mx-auto mt-2 grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 sm:gap-y-20 lg:max-w-none lg:grid-cols-2">
<div class="">
<p class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Fueling innovation and growth for businesses</p>
<p class="mt-6 text-lg leading-8 text-gray-600">Our platform is trusted by companies of all sizes to streamline operations, boost productivity, and deliver superior results.</p>
</div>
<div class="lg:-my-8 lg:pl-24 xl:pl-32">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:gap-y-0">
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6 lg:border-b lg:py-8 lg:border-l-0">
<dt class="text-base leading-7 text-gray-600">supported account</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">1.5M</dd>
</div>
<div class="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6 lg:border-b lg:py-8 lg:border-l-0">
<dt class="text-base leading-7 text-gray-600">Verified users</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">2M+</dd>
</div>
<div class="relative flex flex-col gap-y-3 border-l border-gray-900/10 pl-6 lg:py-8 lg:border-l-0">
<dt class="text-base leading-7 text-gray-600">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">98%</dd>
</div>
<div class="relative flex flex-col gap-y-3 border-l border-gray-900/10 pl-6 lg:py-8 lg:border-l-0">
<dt class="text-base leading-7 text-gray-600">Rating</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">5.0</dd>
</div>
</dl>
</div>
</div>
</div>
</div><div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-2xl px-6 lg:max-w-4xl lg:px-8">
<div class="mx-auto max-w-2xl lg:text-center">
<p class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">About our platform</p>
<p class="mt-6 text-pretty text-lg leading-8 text-gray-600">Our platform is trusted by companies of all sizes to streamline operations, boost productivity, and deliver superior results.</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2">
<div class="flex flex-col gap-y-3 rounded-2xl bg-gray-50 px-8 py-12 text-center lg:py-20">
<p class="text-4xl lg:text-5xl font-semibold tracking-tight text-gray-900">243K</p>
<p class="text-pretty text-base leading-7 text-gray-600">Users from across the globe</p>
</div>
<div class="flex flex-col gap-y-3 rounded-2xl bg-pink-500 px-8 py-12 text-center lg:py-20">
<p class="text-4xl lg:text-5xl font-semibold tracking-tight text-white">98%</p>
<p class="text-pretty text-base leading-7 text-pink-100">Customer satisfaction</p>
</div>
<div class="grid grid-cols-1 gap-x-8 rounded-2xl bg-gray-900 sm:col-span-2 sm:grid-cols-2">
<div class="flex flex-col gap-y-3 px-8 py-12 text-center lg:py-20">
<p class="text-4xl lg:text-5xl font-semibold tracking-tight text-white">489M</p>
<p class="text-pretty text-base leading-7 text-gray-300">Revenue generated in 2024</p>
</div>
<div class="flex flex-col gap-y-3 px-8 py-12 text-center lg:py-20">
<p class="text-4xl lg:text-5xl font-semibold tracking-tight text-white">267%</p>
<p class="text-pretty text-base leading-7 text-gray-300">Growth in 2024</p>
</div>
</div>
</div>
</div>
</div><div class="relative isolate overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<dl class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:rounded-3xl bg-gray-50 px-8 py-12 sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col items-center gap-y-3 text-center">
<dt class="order-last text-pretty text-base leading-7 text-gray-600">Customer satisfaction</dt>
<dd class="flex flex-col items-center justify-center gap-y-6 text-4xl font-semibold tracking-tight text-gray-900">
<svg class="h-9 w-9 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM9.96665 14.7439C9.827 14.2162 9.28872 13.897 8.75746 14.0299C8.22166 14.1638 7.8959 14.7067 8.02985 15.2425C8.46886 16.9986 10.2833 18 12 18C13.7853 18 15.4524 16.9881 15.9701 15.24C16.1041 14.7042 15.7783 14.1638 15.2425 14.0299C14.7113 13.897 14.173 14.2162 14.0333 14.7439C13.7722 15.6146 12.8398 16 12 16C11.1602 16 10.2278 15.6147 9.96665 14.7439ZM10.5 10C10.5 10.8284 9.82843 11.5 9 11.5C8.17157 11.5 7.5 10.8284 7.5 10C7.5 9.17157 8.17157 8.5 9 8.5C9.82843 8.5 10.5 9.17157 10.5 10ZM15 11.5C15.8284 11.5 16.5 10.8284 16.5 10C16.5 9.17157 15.8284 8.5 15 8.5C14.1716 8.5 13.5 9.17157 13.5 10C13.5 10.8284 14.1716 11.5 15 11.5Z" fill="currentColor" />
</svg>
98%
</dd>
</div>
<div class="flex flex-col items-center gap-y-3 text-center">
<dt class="order-last text-pretty text-base leading-7 text-gray-600">Global user base</dt>
<dd class="flex flex-col items-center justify-center gap-y-6 text-4xl font-semibold tracking-tight text-gray-900">
<svg class="h-9 w-9 text-pink-500" version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" aria-hidden="true">
<path
fill="currentColor"
d="M32,0C15.776,0,2.381,12.077,0.292,27.729c-0.002,0.016-0.004,0.031-0.006,0.047 c-0.056,0.421-0.106,0.843-0.146,1.269c-0.019,0.197-0.029,0.396-0.045,0.594c-0.021,0.28-0.044,0.56-0.058,0.842 C0.014,30.983,0,31.49,0,32c0,17.673,14.327,32,32,32s32-14.327,32-32S49.673,0,32,0z M33.362,58.502 c-0.72,0.787-1.901,1.414-2.675,0.67c-0.653-0.644-0.099-1.44,0-2.353c0.125-1.065-0.362-2.345,0.666-2.676 c0.837-0.259,1.468,0.322,2.009,1.012C34.187,56.175,34.239,57.526,33.362,58.502z M43.446,49.87 c-1.18,0.608-2.006,0.494-3.323,0.673c-2.454,0.309-4.394,1.52-6.333,0c-0.867-0.695-0.978-1.451-1.65-2.341 c-1.084-1.364-1.355-3.879-3.01-3.322c-1.058,0.356-1.026,1.415-1.654,2.335c-0.81,1.156-0.607,2.793-2.005,2.993 c-0.974,0.138-1.499-0.458-2.321-1c-0.922-0.614-1.104-1.348-2.002-1.993c-0.934-0.689-1.69-0.693-2.654-1.334 c-0.694-0.463-0.842-1.304-1.673-1.334c-0.751-0.022-1.289,0.346-1.664,0.996c-0.701,1.214-0.942,4.793-2.988,4.665 c-1.516-0.103-4.758-3.509-5.994-4.327c-0.405-0.273-0.78-0.551-1.158-0.763c-1.829-3.756-2.891-7.952-2.997-12.385 c0.614-0.515,1.239-0.769,1.819-1.493c0.927-1.13,0.481-2.507,1.673-3.335c0.886-0.604,1.602-0.507,2.669-0.658 c1.529-0.222,2.491-0.422,3.988,0c1.459,0.409,2.016,1.246,3.326,1.992c1.415,0.81,2.052,1.766,3.66,2.001 c1.166,0.165,1.966-0.901,2.988-0.337c0.824,0.458,1.406,1.066,1.341,2.001c-0.1,1.218-2.522,0.444-2.659,1.662 c-0.183,1.558,2.512-0.194,3.992,0.33c0.974,0.355,2.241,0.294,2.325,1.334c0.081,1.156-1.608,0.837-2.657,1.335 c-1.162,0.541-1.771,0.996-3.004,1.329c-1.125,0.298-2.312-0.628-2.987,0.329c-0.53,0.742-0.343,1.489,0,2.335 c0.787,1.931,3.349,1.352,5.322,0.657c1.383-0.488,1.641-1.726,2.997-2.329c1.438-0.641,2.554-1.335,3.981-0.663 c1.178,0.556,0.849,2.05,2.006,2.663c1.253,0.668,2.432-0.729,3.663,0c0.957,0.569,0.887,1.521,1.655,2.327 c0.894,0.942,1.41,1.702,2.668,2c1.286,0.299,2.072-1.071,3.327-0.671c0.965,0.315,1.755,0.68,1.987,1.672 C46.465,48.634,44.744,49.198,43.446,49.87z M45.839,33.841c-1.154,1.16-2.156,1.539-3.771,1.893c-1.433,0.315-3.443,1.438-3.772,0 c-0.251-1.148,1.029-1.558,1.893-2.359c0.959-0.895,1.854-0.983,2.826-1.892c0.87-0.802,0.756-2.031,1.893-2.359 c1.109-0.32,2.182-0.019,2.825,0.947C48.652,31.438,47.006,32.681,45.839,33.841z M59.989,29.319 c-0.492,0.508-0.462,1.044-0.965,1.542c-0.557,0.539-1.331,0.307-1.738,0.968c-0.358,0.577-0.13,1.057-0.194,1.735 c-0.041,0.387-1.924,1.256-2.313,0.385c-0.214-0.481,0.281-0.907,0-1.353c-0.263-0.401-0.555-0.195-0.899,0.181 c-0.359,0.388-0.772,0.958-1.221,1.172c-0.589,0.273-0.196-2.25-0.395-3.088c-0.146-0.663,0.01-1.08,0.198-1.736 c0.25-0.91,0.938-1.206,1.155-2.125c0.194-0.806,0.033-1.295,0-2.123c-0.039-0.906-0.015-1.427-0.188-2.314 c-0.192-0.937-0.252-1.525-0.771-2.316c-0.418-0.624-0.694-1.001-1.354-1.352c-0.16-0.088-0.31-0.146-0.452-0.191 c-0.34-0.113-0.659-0.128-1.098-0.193c-0.888-0.132-1.522,0.432-2.314,0c-0.462-0.255-0.606-0.575-0.96-0.967 c-0.404-0.434-0.511-0.789-0.967-1.158c-0.341-0.276-0.552-0.437-0.965-0.581c-0.79-0.263-1.342-0.082-2.126,0.196 c-0.77,0.268-1.058,0.707-1.739,1.155c-0.522,0.303-0.893,0.371-1.348,0.774c-0.276,0.242-1.59,1.177-2.127,1.155 c-0.544-0.021-0.851-0.343-1.338-0.382c-0.065-0.008-0.13-0.008-0.204,0c0,0,0,0-0.005,0c-0.473,0.036-0.696,0.269-1.146,0.382 c-1.107,0.276-1.812-0.115-2.905,0.197c-0.712,0.2-0.993,0.766-1.73,0.771c-0.841,0.005-1.125-0.743-1.932-0.968 c-0.442-0.118-0.702-0.129-1.157-0.19c-0.749-0.108-1.178-0.119-1.926-0.191H24.86c-0.016,0.006-0.591,0.058-0.688,0 c-0.422-0.286-0.722-0.521-1.244-0.773c-0.575-0.283-0.919-0.428-1.547-0.584l0.026-0.381c0,0,0-0.847-0.121-1.207 c-0.115-0.361-0.24-0.361,0-1.086c0.248-0.722,0.679-1.182,0.679-1.182c0.297-0.228,0.516-0.305,0.769-0.58 c0.51-0.539,0.717-0.998,0.774-1.739c0.067-0.972-1.205-1.367-0.97-2.316c0.209-0.826,0.904-0.98,1.547-1.543 c0.779-0.67,1.468-0.758,2.12-1.542c0.501-0.593,0.911-0.965,0.97-1.738c0.053-0.657-0.23-1.068-0.57-1.538 C28.356,2.175,30.157,2,32,2c14.919,0,27.29,10.893,29.605,25.158c-0.203,0.352-0.001,0.796-0.27,1.193 C60.979,28.894,60.436,28.85,59.989,29.319z"
></path>
</svg>
28M
</dd>
</div>
<div class="flex flex-col items-center gap-y-3 text-center">
<dt class="order-last text-pretty text-base leading-7 text-gray-600">Expert team members</dt>
<dd class="flex flex-col items-center justify-center gap-y-6 text-4xl font-semibold tracking-tight text-gray-900">
<svg class="h-9 w-9 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 11C3 9.11438 3 8.17157 3.58579 7.58579C4.17157 7 5.11438 7 7 7H8H16H17C18.8856 7 19.8284 7 20.4142 7.58579C21 8.17157 21 9.11438 21 11V17C21 18.8856 21 19.8284 20.4142 20.4142C19.8284 21 18.8856 21 17 21H16H8H7C5.11438 21 4.17157 21 3.58579 20.4142C3 19.8284 3 18.8856 3 17V11Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
<path d="M8 21V5C8 3.89543 8.89543 3 10 3H14C15.1046 3 16 3.89543 16 5V21" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
</svg>
150+
</dd>
</div>
<div class="flex flex-col items-center gap-y-3 text-center">
<dt class="order-last text-pretty text-base leading-7 text-gray-600">Rapid business growth</dt>
<dd class="flex flex-col items-center justify-center gap-y-6 text-4xl font-semibold tracking-tight text-gray-900">
<svg class="h-9 w-9 text-pink-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 21H4.6C4.03995 21 3.75992 21 3.54601 20.891C3.35785 20.7951 3.20487 20.6422 3.10899 20.454C3 20.2401 3 19.9601 3 19.4V3M20 8L16.0811 12.1827C15.9326 12.3412 15.8584 12.4204 15.7688 12.4614C15.6897 12.4976 15.6026 12.5125 15.516 12.5047C15.4179 12.4958 15.3215 12.4458 15.1287 12.3457L11.8713 10.6543C11.6785 10.5542 11.5821 10.5042 11.484 10.4953C11.3974 10.4875 11.3103 10.5024 11.2312 10.5386C11.1416 10.5796 11.0674 10.6588 10.9189 10.8173L7 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
320%
</dd>
</div>
</dl>
</div>
</div><div class="relative isolate overflow-hidden bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="mx-auto max-w-2xl text-base font-semibold leading-7 text-pink-500 lg:max-w-none">About us</h2>
<p class="mt-2 text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Trusted by thousands of businesses</p>
</div>
<div class="mx-auto mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-6 text-base leading-7 text-gray-600 lg:max-w-none lg:grid-cols-2">
<div>
<p class="">We offer a robust, customer-centric platform that empowers businesses with a comprehensive suite of tools to streamline their operations and optimize workflows. Whether you’re a small startup or an enterprise, our platform is designed to help you increase efficiency, automate repetitive tasks, and focus on core business objectives. With intuitive interfaces and powerful capabilities, our solutions are tailored to meet your specific needs.</p>
<p class="mt-6">Our tools are designed to adapt to the evolving business landscape, offering seamless integration and scalability. We prioritize flexibility, ensuring that as your business grows, so do your opportunities. Whether improving processes or enhancing customer interactions, we help you stay ahead.</p>
</div>
<div>
<p class="">Productivity is at the heart of everything we build. By leveraging our platform, businesses can significantly boost performance, eliminate bottlenecks, and make data-driven decisions that lead to tangible results. Our goal is to empower teams to work smarter, not harder, with solutions that are easy to implement and scale with your success.</p>
<p class="mt-6">Beyond productivity, our platform is designed with user experience in mind. We believe that great technology should not only be powerful but also accessible and easy to use. Our focus on a seamless and enjoyable user experience ensures that you can achieve your goals faster, foster innovation, and ultimately drive growth in a competitive digital marketplace.</p>
</div>
</div>
<dl class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:mt-20 sm:grid-cols-2 lg:max-w-none lg:grid-cols-4">
<div class="flex flex-col gap-y-2 rounded-2xl">
<dt class="text-pretty text-base leading-7 text-gray-600">Users across the globe</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">243K</dd>
</div>
<div class="flex flex-col gap-y-2 rounded-2xl">
<dt class="text-pretty text-base leading-7 text-gray-600">Customer satisfaction</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">98%</dd>
</div>
<div class="flex flex-col gap-y-2 rounded-2xl">
<dt class="text-pretty text-base leading-7 text-gray-600">Revenue generated in 2024</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">489M</dd>
</div>
<div class="flex flex-col gap-y-2 rounded-2xl">
<dt class="text-pretty text-base leading-7 text-gray-600">Growth in investment</dt>
<dd class="order-first text-4xl font-semibold tracking-tight text-gray-900">267%</dd>
</div>
</dl>
</div>
</div>Frequently asked questions
-
Horizontal stat row, large centered numbers, icon-plus-number grid, and a version that pairs the stats with a short description paragraph.
-
Not built in, the components are just static HTML. But it's easy to add a count-up library like CountUp.js and point it at the number elements.
-
Most layouts are designed for three or four. You can add or remove items and the grid adjusts, Tailwind's responsive classes handle the layout.
-
Yes. They reflow cleanly on smaller screens.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.