<section class="py-20 2xl:py-40 bg-gray-800">
<div class="container px-4 mx-auto">
<div class="flex flex-wrap -mx-4 pb-24 mb-16 border-b border-gray-400">
<div class="w-full lg:w-2/5 px-4 mb-16 lg:mb-0">
<span class="text-lg text-blue-400 font-bold">We're Zospace</span>
<h2 class="max-w-sm mt-8 mb-12 text-5xl text-white font-bold font-heading">Thank you for your time</h2>
<p class="mb-16 text-gray-300">The brown fox jumps over the lazy dog.</p>
<div><a class="inline-block mb-4 sm:mb-0 sm:mr-4 py-4 px-12 text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Active demo</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Contact</a></div>
</div>
<div class="w-full lg:w-3/5 px-4">
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16 lg:mb-0">
<ul class="text-lg">
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Hello</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Story</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Pricing</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Applications</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Stats</a></li>
<li><a class="text-gray-200 hover:text-gray-100" href="#">Blog</a></li>
</ul>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-16 lg:mb-0">
<ul class="text-lg">
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Newsletter</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Features</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">How it works</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">FAQ</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Portfolio</a></li>
<li><a class="text-gray-200 hover:text-gray-100" href="#">Team</a></li>
</ul>
</div>
<div class="w-full lg:w-1/3 px-4">
<ul class="text-lg">
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">New account</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Log in</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Testimonials</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Contact</a></li>
<li class="mb-6"><a class="text-gray-200 hover:text-gray-100" href="#">Privacy Policy</a></li>
<li><a class="text-gray-200 hover:text-gray-100" href="#">Cookies</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="md:flex justify-between">
<p class="text-lg text-gray-200 mb-8 md:mb-0">© 2021 Shuffle. All rights reserved.</p>
<div class="flex items-center">
<a class="inline-block mr-2" href="#">
<img class="h-12" src="zospace-assets/logos/facebook.svg" alt="">
</a>
<a class="inline-block mr-2" href="#">
<img class="h-12" src="zospace-assets/logos/instagram.svg" alt="">
</a>
<a class="inline-block" href="#">
<img class="h-12" src="zospace-assets/logos/twitter.svg" alt="">
</a>
</div>
</div>
</div>
</section>Framework
Tailwind
UI Library
All Libraries
Components
- Alert 80
- Application 46
- Banner 10
- Blog 65
- Call to action 113
- Contact 48
- Content 48
- Cookies 46
- E-commerce (orders) 14
- E-commerce (products) 24
- FAQ 52
- Features 108
- Footer 65
- Graphs 9
- HTTP codes 39
- Headers 88
- How it works 73
- Logo clouds 80
- Modals 2
- Navbar 28
- Navigation (horizontal) 113
- Navigation (vertical) 2
- Newsletter 52
- Portfolio 66
- Pricing 62
- Reviews 5
- Sign in / Sign up 73
- Stats 45
- Ta general tables 7
- Tables 25
- Team 52
- Testimonials 68
- Users 17
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.
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Component #8
Component #9
Component #10
