<section class="py-24 bg-black overflow-x-hidden">
<div class="container mx-auto px-4">
<div class="mb-10 max-w-xl mx-auto text-center">
<span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
<h2 class="mt-6 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
</div>
<div class="flex flex-wrap -mx-4 mb-20">
<div class="w-full md:w-1/2 lg:w-1/4 px-4">
<div class="text-center">
<div class="relative h-40 flex items-center justify-center">
<img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="boldui-assets/elements/ellipse.svg" alt="">
<h3 class="relative text-3xl text-blue-500 font-heading">42 732</h3>
</div>
<p class="md:px-20 text-sm uppercase font-semibold text-gray-500">Dolor sit amet consectutar</p>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-4">
<div class="text-center">
<div class="relative h-40 flex items-center justify-center">
<img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="boldui-assets/elements/ellipse.svg" alt="">
<h3 class="relative text-3xl text-blue-500 font-heading">176 441</h3>
</div>
<p class="md:px-20 text-sm uppercase font-semibold text-gray-500">Dolor sit amet consectutar</p>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-4">
<div class="text-center">
<div class="relative h-40 flex items-center justify-center">
<img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="boldui-assets/elements/ellipse.svg" alt="">
<h3 class="relative text-3xl text-blue-500 font-heading">78 254</h3>
</div>
<p class="md:px-20 text-sm uppercase font-semibold text-gray-500">Dolor sit amet consectutar</p>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 px-4">
<div class="text-center">
<div class="relative h-40 flex items-center justify-center">
<img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="boldui-assets/elements/ellipse.svg" alt="">
<h3 class="relative text-3xl text-blue-500 font-heading">4 756 369</h3>
</div>
<p class="md:px-20 text-sm uppercase font-semibold text-gray-500">Dolor sit amet consectutar</p>
</div>
</div>
</div>
<div class="text-center">
<a class="inline-flex items-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
<svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
</svg>
<span class="text-sm font-heading">Activte demo</span>
</a>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
