<section class="py-24 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<div class="max-w-xl text-center mx-auto mb-20">
<h2 class="font-heading mb-5 text-6xl tracking-tighter">Master your workflow with Basko's productivity tools</h2>
<p class="text-xl tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p>
</div>
<div class="flex flex-wrap -m-7 mb-14">
<div class="w-full md:w-1/3 p-7">
<div class="max-w-xs">
<img class="mb-10" src="basko-assets/images/how-it-works/tool.svg" alt="">
<h3 class="mb-4 text-xl font-semibold tracking-tight">Choose the right tool</h3>
<p class="text-gray-600 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p>
</div>
</div>
<div class="w-full md:w-1/3 p-7">
<div class="max-w-xs">
<img class="mb-10" src="basko-assets/images/how-it-works/account.svg" alt="">
<h3 class="mb-4 text-xl font-semibold tracking-tight">Set up your account</h3>
<p class="text-gray-600 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p>
</div>
</div>
<div class="w-full md:w-1/3 p-7">
<div class="max-w-xs">
<img class="mb-10" src="basko-assets/images/how-it-works/start.svg" alt="">
<h3 class="mb-4 text-xl font-semibold tracking-tight">Start using Basko</h3>
<p class="text-gray-600 tracking-tight">Use and re-use tons of responsive sections too a main create the perfect layout. Sections are ready.</p>
</div>
</div>
</div>
<div class="flex flex-row justify-center"><a class="inline-block mx-auto px-5 py-4 text-white font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
</div>
</section>