May 12, 2020 in Tailwind css
I was building a website with Tailwind and thought it would be nice to share this generic footer component html with you. Run it with https://tailwind.run/new to see the results. It will look like this:
Tailwind footer html & css component:
<nav id="footer" class="bg-gray-500">
<!-- start container -->
<div class="container mx-auto pt-8 pb-4">
<div class="flex flex-wrap overflow-hidden sm:-mx-1 md:-mx-px lg:-mx-2 xl:-mx-2">
<div class="w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-6">
<!-- Column 1 Content -->
<img style="max-width: 70%;height:auto;" class="" src="https://pngimage.net/wp-content/uploads/2019/05/fake-logo-png-.png" alt="Logo">
</div>
<div class="w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-6">
<!-- Column 2 Content -->
<h4 class="text-white">Important</h4>
<ul class="nav navbar-nav">
<li id="navi-2" class="leading-7 text-sm">
<a class="text-white underline text-small" href="/page-1">
Page 1 </a>
</li>
<li id="navi-1" class="leading-7 text-sm"><a class="text-white underline text-small" href="/page-2">Page 2</a></li>
</ul>
</div>
<div class="w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-6">
<!-- Column 3 Content -->
<h4 class="text-white">Info</h4>
<ul class="">
<li id="navi-2" class="leading-7 text-sm">
<a class="text-white underline text-small" href="/page-1">
Page 1 </a>
</li>
<li id="navi-1" class="leading-7 text-sm"><a class="text-white underline text-small" href="/page-2">Page 2</a></li>
</ul>
</div>
<div class="w-full overflow-hidden sm:my-1 sm:px-1 sm:w-1/2 md:my-px md:px-px md:w-1/2 lg:my-2 lg:px-2 lg:w-1/4 xl:my-2 xl:px-2 xl:w-1/4 pb-6">
<!-- Column 4 Content -->
<h4 class="text-white">Products</h4>
<ul class="">
<li id="navi-2" class="leading-7 text-sm">
<a class="text-white underline text-small" href="/page-1">
Page 1 </a>
</li>
<li id="navi-1" class="leading-7 text-sm"><a class="text-white underline text-small" href="/page-2">Page 2</a></li>
</ul>
</div>
</div>
<!-- Start footer bottom -->
<div class="pt-4 md:flex md:items-center md:justify-center " style="border-top:1px solid white">
<ul class="">
<li class="md:mx-2 md:inline leading-7 text-sm" id="footer-navi-2"><a class="text-white underline text-small" href="/disclaimer">Disclaimer</a></li>
<li class="md:mx-2 md:inline leading-7 text-sm" id="footer-navi-2"><a class="text-white underline text-small" href="/cookie">Cookie policy</a></li>
<li class="md:mx-2 md:inline leading-7 text-sm" id="footer-navi-2"><a class="text-white underline text-small" href="/privacy">Privacy</a></li>
</ul>
</div>
<!-- end container -->
</div>
</nav>