<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>