<section class="px-8 md:px-24 pt-32 pb-40">
<h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-4">Get started with 3 steps</h1>
<p class="tracking-tight text-center text-gray-700 text-lg mb-20">There are many variations of passages of available</p>
<div class="flex flex-wrap -m-4">
<div class="w-full lg:w-1/3 p-4">
<div class="relative" style="height:518px;">
<img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/how-it-works/picture1.png" alt="">
<div class="absolute top-8 right-8">
<div class="bg-white rounded-full w-14 h-14 flex items-center justify-center">
<p class="tracking-tight text-lg font-semibold">01</p>
</div>
</div>
<div class="absolute bottom-8 left-9 right-9">
<p class="tracking-tight text-white text-2xl font-semibold mb-2">Book Time</p>
<p class="tracking-tight text-white text-opacity-80 max-w-xs">It is a long established fact that a reader will be distracted by the readable</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 p-4">
<div class="relative" style="height:518px;">
<img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/how-it-works/picture2.png" alt="">
<div class="absolute top-8 right-8">
<div class="bg-white rounded-full w-14 h-14 flex items-center justify-center">
<p class="tracking-tight text-lg font-semibold">02</p>
</div>
</div>
<div class="absolute bottom-8 left-9 right-9">
<p class="tracking-tight text-white text-2xl font-semibold mb-2">Meet Experts</p>
<p class="tracking-tight text-white text-opacity-80 max-w-xs">It is a long established fact that a reader will be distracted by the readable</p>
</div>
</div>
</div>
<div class="w-full lg:w-1/3 p-4">
<div class="relative" style="height:518px;">
<img class="absolute inset-0 w-full h-full object-cover rounded-2xl" src="consulty-assets/how-it-works/picture3.png" alt="">
<div class="absolute top-8 right-8">
<div class="bg-white rounded-full w-14 h-14 flex items-center justify-center">
<p class="tracking-tight text-lg font-semibold">03</p>
</div>
</div>
<div class="absolute bottom-8 left-9 right-9">
<p class="tracking-tight text-white text-2xl font-semibold mb-2">Get Results</p>
<p class="tracking-tight text-white text-opacity-80 max-w-xs">It is a long established fact that a reader will be distracted by the readable</p>
</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
