Footers
Center aligned with Social
<footer class="flex flex-col space-y-10 justify-center m-10">
<nav class="flex justify-center space-x-10 text-gray-500 font-medium">
<a class="hover:text-gray-900" href="#">Home</a>
<a class="hover:text-gray-900" href="#">About</a>
<a class="hover:text-gray-900" href="#">Services</a>
<a class="hover:text-gray-900" href="#">Media</a>
<a class="hover:text-gray-900" href="#">Gallery</a>
<a class="hover:text-gray-900" href="#">Contact</a>
</nav>
<div class="flex justify-center space-x-5">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-new.png" />
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/linkedin-2.png" />
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/instagram-new.png" />
</a>
<a href="https://messenger.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-messenger--v2.png" />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/twitter.png" />
</a>
</div>
<p class="text-center text-gray-700 font-medium">© 2022 Company Ltd. All rights reservered.</p>
</footer>Copyright with Social
<footer class="flex justify-between items-center m-10">
<p class="text-center text-gray-700 font-medium">© 2022 Company Ltd. All rights reservered.</p>
<div class="flex justify-center space-x-5">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-new.png" />
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/linkedin-2.png" />
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/instagram-new.png" />
</a>
<a href="https://messenger.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-messenger--v2.png" />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/twitter.png" />
</a>
</div>
</footer>4 Columns with Subscribe Option
<footer class="m-10 space-y-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5">
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">About</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
<a class="hover:text-gray-900" href="#">Link 3</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">Services</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
<a class="hover:text-gray-900" href="#">Link 3</a>
<a class="hover:text-gray-900" href="#">Link 4</a>
<a class="hover:text-gray-900" href="#">Link 5</a>
<a class="hover:text-gray-900" href="#">Link 6</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">Company</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">Legal</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
<a class="hover:text-gray-900" href="#">Link 3</a>
<a class="hover:text-gray-900" href="#">Link 4</a>
</div>
</div>
<div class="md:col-span-2">
<h5 class="font-medium uppercase text-gray-900 mb-3">Subscribe to our Newsletter</h5>
<p class="text-gray-600">Get instant notification of our latest offers and sales</p>
<form action="#" class="flex space-x-3 mt-5">
<input type="email" name="email" id="email" placeholder="Enter your Email Address"
class="flex-1 border-2 rounded-md px-3 py-2">
<button type="submit" class="bg-blue-800 text-white px-5 py-2 rounded-md">Subscribe</button>
</form>
</div>
</div>
<div class="border-b border-gray-200"></div>
<div class="flex justify-between items-center">
<p class="text-center text-gray-700 font-medium">© 2022 Company Ltd. All rights reservered.</p>
<div class="flex justify-center space-x-5">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-new.png" />
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/linkedin-2.png" />
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/instagram-new.png" />
</a>
<a href="https://messenger.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-messenger--v2.png" />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/twitter.png" />
</a>
</div>
</div>
</footer>4 Columns with About Text
<footer class="m-10 space-y-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5">
<div class="md:col-span-2 lg:mr-10 space-y-5">
<img src="https://img.icons8.com/fluent/96/000000/bot.png" />
<p class="text-gray-600">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<div class="flex space-x-5">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-new.png" />
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/linkedin-2.png" />
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/instagram-new.png" />
</a>
<a href="https://messenger.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/facebook-messenger--v2.png" />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<img src="https://img.icons8.com/fluent/30/000000/twitter.png" />
</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">About</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
<a class="hover:text-gray-900" href="#">Link 3</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">Services</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
<a class="hover:text-gray-900" href="#">Link 3</a>
<a class="hover:text-gray-900" href="#">Link 4</a>
<a class="hover:text-gray-900" href="#">Link 5</a>
<a class="hover:text-gray-900" href="#">Link 6</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">Company</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
</div>
</div>
<div class="font-medium">
<h5 class="uppercase text-gray-900 mb-3">Legal</h5>
<div class="flex flex-col space-y-1 text-gray-500">
<a class="hover:text-gray-900" href="#">Link 1</a>
<a class="hover:text-gray-900" href="#">Link 2</a>
<a class="hover:text-gray-900" href="#">Link 3</a>
<a class="hover:text-gray-900" href="#">Link 4</a>
</div>
</div>
</div>
<div class="border-b border-gray-200"></div>
<div>
<p class="text-center text-gray-700 font-medium">© 2022 Company Ltd. All rights reservered.</p>
</div>
</footer>