<section class="pt-24 pb-32 bg-white overflow-hidden">
<div class="container px-4 mx-auto">
<h2 class="mb-28 text-6xl md:text-7xl font-bold font-heading tracking-px-n leading-tight md:max-w-lg">We make things easy for your business</h2>
<div class="flex flex-wrap -m-8">
<div class="w-full md:w-1/2 lg:w-1/4 p-8">
<div class="flex flex-wrap items-center mb-7 -m-2">
<div class="w-auto p-2">
<div class="relative w-14 h-14 text-2xl font-bold font-heading bg-indigo-100 rounded-full">
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">1</span>
</div>
</div>
<div class="flex-1 p-2">
<div class="w-full h-px bg-gray-200"></div>
</div>
</div>
<h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-8">
<div class="flex flex-wrap items-center mb-7 -m-2">
<div class="w-auto p-2">
<div class="relative w-14 h-14 text-2xl text-white font-bold bg-indigo-600 rounded-full">
<img class="absolute top-0 left-0" src="flaro-assets/images/how-it-works/gradient.svg" alt="">
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">2</span>
</div>
</div>
<div class="flex-1 p-2">
<div class="w-full h-px bg-gray-200"></div>
</div>
</div>
<h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-8">
<div class="flex flex-wrap items-center mb-7 -m-2">
<div class="w-auto p-2">
<div class="relative w-14 h-14 text-2xl font-bold font-heading bg-indigo-100 rounded-full">
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">3</span>
</div>
</div>
<div class="flex-1 p-2">
<div class="w-full h-px bg-gray-200"></div>
</div>
</div>
<h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
</div>
<div class="w-full md:w-1/2 lg:w-1/4 p-8">
<div class="flex flex-wrap items-center mb-7 -m-2">
<div class="w-auto p-2">
<div class="relative w-14 h-14 text-2xl font-bold font-heading bg-indigo-100 rounded-full">
<span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">4</span>
</div>
</div>
<div class="flex-1 p-2">
<div class="w-full h-px bg-gray-200"></div>
</div>
</div>
<h3 class="text-xl font-semibold leading-normal md:max-w-xs">A complete UI kit for building your business</h3>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Alert 101
- Application 108
- Banners 73
- Benefits 16
- Blog 132
- Breadcrumbs 24
- Call to action 199
- Cards 29
- Careers 32
- Confirmation 6
- Contact 106
- Content 85
- Cookies 97
- Dashboards 13
- Download 5
- E-commerce (orders) 35
- E-commerce (products) 76
- FAQ 95
- Features 227
- Footers 145
- Forms 9
- Graphs 38
- HTTP codes 107
- Hero section 164
- How it works 129
- Instagram photos 5
- Integrations 5
- Logo clouds 179
- Modals 29
- Navbar 209
- Navigation (horizontal) 215
- Navigation (vertical) 7
- Newsletter 129
- Notifications 7
- Paginations 12
- Portfolio 93
- Pricing 128
- Product info 5
- Projects 6
- Reviews 32
- Rich text 3
- Sign in / Sign up 181
- Snackbars 10
- Stats 153
- Tables 75
- Team 117
- Testimonials 144
- Users 17
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
Show your workflow and the way you operate with Tailwind how it works components. This will help you explain the important steps of the company or department process.
Choose from many variations of Tailwind components how it works section. Presented here are variants available in various UI libraries. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Tailwind website template. Each library has been designed by a professional designer and coded by our team of developers.
Get access to all Tailwind components how it works sections, code and our editor. Try the demo for free.
