<section class="py-24 lg:py-32 bg-black overflow-hidden">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap lg:items-center -m-8">
<div class="w-full md:w-1/2 p-8">
<img class="mx-auto rounded-lg transform hover:-translate-y-1 transition duration-500" src="basko-assets/images/facts/media.jpg" alt="">
</div>
<div class="w-full md:w-1/2 p-8">
<div class="md:max-w-md">
<h2 class="font-heading mb-24 text-6xl text-white tracking-tighter leading-tight">Showcase some impressive numbers.</h2>
<div class="mb-8">
<h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">55%</h3>
<p class="text-xl text-gray-200 tracking-tight">A percentage number that suggests an increase in performance.</p>
</div>
<div>
<h3 class="font-heading mb-3 inline-block text-6xl md:text-7xl tracking-tighter" style="background: linear-gradient(86deg, rgba(186,109,238,1) 0%, rgba(252,202,89,1) 100%, rgba(252,202,89,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">43%</h3>
<p class="text-xl text-gray-200 tracking-tight">Another percentage that could suggest internet rates etc..</p>
</div>
</div>
</div>
</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
