<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>Framework
Tailwind CSS
UI Library
All Libraries
Components
- Advanced inputs 18
- Alert 111
- Application 113
- Banners 76
- Benefits 16
- Blog 143
- Brands 3
- Breadcrumbs 27
- Call to action 227
- Cards 43
- Careers 34
- Contact 117
- Content 90
- Cookies 104
- Dashboards 13
- Download 5
- Dropdowns 4
- E-commerce (orders) 65
- E-commerce (products) 101
- Empty state 4
- FAQ 103
- Features 263
- Footers 163
- Forms 9
- Graphs 58
- HTTP codes 119
- Hero section 184
- How it works 135
- Instagram photos 9
- Integrations 8
- Logo clouds 179
- Modals 35
- Navbar 212
- Navigation (horizontal) 241
- Navigation (vertical) 12
- Newsletter 138
- Notifications 11
- Paginations 16
- Portfolio 93
- Pricing 141
- Product info 5
- Projects 6
- Reviews 36
- Rich text 3
- Search 3
- Sign in / Sign up 201
- Snackbars 10
- Stats 173
- Steps 12
- Tables 91
- Tabs 2
- Team 122
- Testimonials 160
- 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.
