<section class="pb-40 xs:pb-64 sm:pb-80 lg:pb-118 overflow-hidden">
<div class="relative pt-20 md:pt-40 bg-yellowGray-500">
<div class="container px-4 mx-auto">
<div class="max-w-2xl pb-40 xs:pb-64 sm:pb-80 lg:pb-118 relative">
<div class="inline-flex items-center px-5 py-2 bg-white rounded-full mb-8">
<span class="block w-2 h-2 mr-2 rounded-full bg-indigo-500"></span>
<span class="uppercase text-sm font-medium tracking-tight">HOW IT WORKS</span>
</div>
<h1 class="max-w-md text-6xl sm:text-7xl xl:text-8xl font-heading mb-10">How does it work?</h1>
<p class="text-2xl">Record your audio and upload it to Suncealand. We'll help you distribute your podcast to Spotify, Apple and Google Podcasts.</p>
</div>
</div>
<img class="absolute bottom-0 right-0 pl-20 transform translate-y-1/2" src="suncealand-assets/images/computer-info-right.png" alt="">
</div>
</section>Framework
Tailwind CSS
UI Library
Suncealand
Component #1
Component #2
Component #3
Component #4
Component #5
How it works Components by Shuffle
Choose from 5 variations of Tailwind How it works components. Presented here are variants available in Suncealand library.
Get access to all Tailwind How it works components, code and our visual editor. Try the demo for free!
