<section class="py-24 bg-black overflow-hidden">
<div class="container px-4 mx-auto">
<div class="mb-14 p-11 rounded-2xl" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
<div class="flex flex-wrap items-center -m-8">
<div class="w-full md:w-1/2 p-8">
<h2 class="font-heading text-6xl text-white tracking-tighter">Grow your business fast with Basko Productivity Tool.</h2>
</div>
<div class="w-full md:w-1/2 p-8">
<div class="flex flex-wrap md:justify-end">
<div class="auto"><a class="inline-block px-5 py-4 text-white font-semibold tracking-tight bg-gray-700 hover:bg-gray-800 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a></div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap justify-between -m-8">
<div class="w-auto p-8">
<h3 class="mb-7 text-white font-semibold tracking-tight">Company</h3>
<ul>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">About</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Features</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Works</a></li>
<li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Career</a></li>
</ul>
</div>
<div class="w-auto p-8">
<h3 class="mb-7 text-white font-semibold tracking-tight">Help</h3>
<ul>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Customer Support</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Delivery Details</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Terms & Conditions</a></li>
<li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="w-auto p-8">
<h3 class="mb-7 text-white font-semibold tracking-tight">Resources</h3>
<ul>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Free eBooks</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Development Tutorial</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">How to - Blog</a></li>
<li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Youtube Playlist</a></li>
</ul>
</div>
<div class="w-auto p-8">
<h3 class="mb-7 text-white font-semibold tracking-tight">Links</h3>
<ul>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Free eBooks</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Development Tutorial</a></li>
<li class="mb-6 text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">How to - Blog</a></li>
<li class="text-gray-200 tracking-tight"><a class="text-white hover:text-gray-300 tracking-tight transition duration-200" href="#">Youtube Playlist</a></li>
</ul>
</div>
</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
Footer is the place where you will put the site navigation and all the relevant information. That is why it is worth putting some effort into its design, prioritizing vital information and links over the less important ones.
Choose from many variants of Tailwind components footers. The variants shown here are available in various UI libraries in the Shuffle Editor. 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 is designed by a professional designer and coded by our team of developers.
Get access to all Tailwind components footers section, code and our editor. Try the demo for free.
