Section Data Stats Using Tailwind UI
Transform data into compelling visuals with our ‘Section Data Stats,’ meticulously built using Tailwind CSS.
section
Loading component...
43 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
.body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="antialiased text-white bg-no-repeat bg-gradient-to-br from-indigo-500 to-pink-700 via-blue-800 ">
<section class="text-gray-600 div-font">
<div class="container flex flex-wrap px-5 py-24 mx-auto">
<div class="flex flex-wrap content-start mt-auto mb-auto -mx-4 lg:w-1/2 sm:w-2/3 sm:pr-10">
<div class="w-full px-4 mb-6 sm:p-4">
<h1 class="mb-2 text-4xl font-bold text-white title-font">Unleashing <span class="underline decoration-wavy decoration-red-500">Excellence</span>, Glance at Our Achievements</h1>
<div class="leading-relaxed text-gray-300">At Company, our impact goes beyond words. Here's a snapshot of our accomplishments across various aspects of our work.</div>
</div>
<div class="w-1/2 p-4 text-center sm:w-1/2 lg:w-1/4">
<h2 class="text-4xl font-extrabold text-white title-font">250+</h2>
<p class="leading-relaxed text-gray-200">🎯 Projects</p>
</div>
<div class="w-1/2 p-4 text-center sm:w-1/2 lg:w-1/4">
<h2 class="text-4xl font-extrabold text-white title-font">15+</h2>
<p class="leading-relaxed text-gray-200">🌍 Global</p>
</div>
<div class="w-1/2 p-4 text-center sm:w-1/2 lg:w-1/4">
<h2 class="text-4xl font-extrabold text-white title-font">10+</h2>
<p class="leading-relaxed text-gray-200">🏆 Awards</p>
</div>
<div class="w-1/2 p-4 text-center sm:w-1/2 lg:w-1/4">
<h2 class="text-4xl font-extrabold text-white title-font">20+</h2>
<p class="leading-relaxed text-gray-200">⏱️ Experience</p>
</div>
</div>
<div class="w-full mt-6 overflow-hidden rounded-lg lg:w-1/2 sm:w-1/3 sm:mt-0">
<img class="object-cover object-center w-full h-full" src="https://images.unsplash.com/photo-1577962917302-cd874c4e31d2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1032&q=80" alt="stats">
</div>
</div>
</section>
</div>