Footers
Ready to use Tailwind CSS footer components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Footers are easy to underestimate but they're usually the last thing someone sees before they leave or before they decide to dig deeper into your site. We have a good set here, simple one-liners with copyright text, centered footers with social links, three and four column link grids, and versions with a newsletter signup built in. All of them also come in a dark version if your site has a dark-themed bottom half. Responsive, clean, nothing fancy going on under the hood.
Tailwind
<footer class="bg-white py-12 sm:pt-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<img class="h-8 sm:mx-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Company name" />
<nav aria-label="Footer" class="mt-8 grid grid-cols-2 gap-6 sm:flex sm:justify-center sm:gap-8">
<div>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">About us</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Pricing</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Careers</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Blog</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Press</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Contact</a>
</div>
</nav>
<div class="mt-12 border-t border-gray-900/10 pt-8 sm:mt-16 sm:flex sm:items-center sm:justify-between">
<div class="flex items-center gap-6 sm:order-2">
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-500 sm:mt-0 md:order-1">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer><footer class="bg-gray-900 py-12 sm:pt-16">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<img class="h-8 sm:mx-auto" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Company name" />
<nav aria-label="Footer" class="mt-8 grid grid-cols-2 gap-6 sm:flex sm:justify-center sm:gap-8">
<div>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">About us</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Pricing</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Careers</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Blog</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Press</a>
</div>
<div>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Contact</a>
</div>
</nav>
<div class="mt-12 border-t border-white/10 pt-8 sm:mt-16 sm:flex sm:items-center sm:justify-between">
<div class="flex items-center gap-6 sm:order-2">
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-400 sm:mt-0 md:order-1">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer><footer aria-labelledby="footer-heading" class="bg-white pb-12 pt-16 sm:pt-24 lg:pt-32">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-600">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:col-span-2">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">News</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<h3 class="text-sm font-semibold leading-6 text-gray-900">Contact</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="inline-flex gap-2 text-sm leading-6 text-gray-600 hover:text-gray-900">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 4C21.6569 4 23 5.34315 23 7V17C23 18.6569 21.6569 20 20 20H4C2.34315 20 1 18.6569 1 17V7C1 5.34315 2.34315 4 4 4H20ZM19.2529 6H4.74718L11.3804 11.2367C11.7437 11.5236 12.2563 11.5236 12.6197 11.2367L19.2529 6ZM3 7.1688V17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V7.16882L13.8589 12.8065C12.769 13.667 11.231 13.667 10.1411 12.8065L3 7.1688Z" fill="currentColor" />
</svg>
[email protected]
</a>
</li>
<li>
<a href="#" class="inline-flex gap-2 text-sm leading-6 text-gray-600 hover:text-gray-900">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
+1 (555) 123-4567
</a>
</li>
</ul>
<div class="mt-6 flex items-center gap-6">
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor" />
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-center text-sm leading-6 text-gray-500">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer><footer aria-labelledby="footer-heading" class="bg-gray-900 pb-12 pt-16 sm:pt-24 lg:pt-32">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-8 gap-y-16 lg:grid-cols-3">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-300">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:col-span-2">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Press</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">News</a>
</li>
</ul>
</div>
<div class="col-span-2 sm:col-span-1">
<h3 class="text-sm font-semibold leading-6 text-white">Contact</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="inline-flex gap-2 text-sm leading-6 text-gray-300 hover:text-white">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 4C21.6569 4 23 5.34315 23 7V17C23 18.6569 21.6569 20 20 20H4C2.34315 20 1 18.6569 1 17V7C1 5.34315 2.34315 4 4 4H20ZM19.2529 6H4.74718L11.3804 11.2367C11.7437 11.5236 12.2563 11.5236 12.6197 11.2367L19.2529 6ZM3 7.1688V17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V7.16882L13.8589 12.8065C12.769 13.667 11.231 13.667 10.1411 12.8065L3 7.1688Z" fill="currentColor" />
</svg>
[email protected]
</a>
</li>
<li>
<a href="#" class="inline-flex gap-2 text-sm leading-6 text-gray-300 hover:text-white">
<svg class="mt-0.5 h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 5.5C3 14.0604 9.93959 21 18.5 21C18.8862 21 19.2691 20.9859 19.6483 20.9581C20.0834 20.9262 20.3009 20.9103 20.499 20.7963C20.663 20.7019 20.8185 20.5345 20.9007 20.364C21 20.1582 21 19.9181 21 19.438V16.6207C21 16.2169 21 16.015 20.9335 15.842C20.8749 15.6891 20.7795 15.553 20.6559 15.4456C20.516 15.324 20.3262 15.255 19.9468 15.117L16.74 13.9509C16.2985 13.7904 16.0777 13.7101 15.8683 13.7237C15.6836 13.7357 15.5059 13.7988 15.3549 13.9058C15.1837 14.0271 15.0629 14.2285 14.8212 14.6314L14 16C11.3501 14.7999 9.2019 12.6489 8 10L9.36863 9.17882C9.77145 8.93713 9.97286 8.81628 10.0942 8.64506C10.2012 8.49408 10.2643 8.31637 10.2763 8.1317C10.2899 7.92227 10.2096 7.70153 10.0491 7.26005L8.88299 4.05321C8.745 3.67376 8.67601 3.48403 8.55442 3.3441C8.44701 3.22049 8.31089 3.12515 8.15802 3.06645C7.98496 3 7.78308 3 7.37932 3H4.56201C4.08188 3 3.84181 3 3.63598 3.09925C3.4655 3.18146 3.29814 3.33701 3.2037 3.50103C3.08968 3.69907 3.07375 3.91662 3.04189 4.35173C3.01413 4.73086 3 5.11378 3 5.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
+1 (555) 123-4567
</a>
</li>
</ul>
<div class="mt-6 flex items-center gap-6">
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor" />
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
<p class="text-center text-sm leading-6 text-gray-400">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer><footer aria-labelledby="footer-heading" class="bg-white pb-12 pt-16 sm:pt-24 lg:pt-32">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-8 gap-y-16 xl:grid-cols-3">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-600">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="grid grid-cols-2 gap-x-8 xl:col-span-2">
<div class="sm:gap-x-8 sm:grid sm:grid-cols-2">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Press</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Contact</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Help Center</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">FAQs</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Community</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Feedback</a>
</li>
</ul>
</div>
</div>
<div class="sm:gap-x-8 sm:grid sm:grid-cols-2">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">News</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Partners</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Privacy Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Terms of Service</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Cookie Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Disclaimer</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex items-center gap-6 md:order-2">
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-500 md:order-1 md:mt-0">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer><footer aria-labelledby="footer-heading" class="bg-gray-900 pb-12 pt-16 sm:pt-24 lg:pt-32">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="grid grid-cols-1 gap-x-8 gap-y-16 xl:grid-cols-3">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-300">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="grid grid-cols-2 gap-x-8 xl:col-span-2">
<div class="sm:gap-x-8 sm:grid sm:grid-cols-2">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Press</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Contact</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Help Center</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">FAQs</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Community</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Feedback</a>
</li>
</ul>
</div>
</div>
<div class="sm:gap-x-8 sm:grid sm:grid-cols-2">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">News</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Partners</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Privacy Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Terms of Service</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Cookie Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Disclaimer</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex items-center gap-6 md:order-2">
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<footer aria-labelledby="footer-heading" class="bg-white pb-12 pt-16 sm:pt-24 lg:pt-32">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-x-8">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-600">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="mt-16 md:grid md:grid-cols-2 md:gap-x-8 xl:col-span-2 xl:mt-0">
<div class="grid grid-cols-2 gap-x-8">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Press</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Contact</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">News</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Partners</a>
</li>
</ul>
</div>
</div>
<div class="mt-16 md:mt-0">
<h3 class="text-sm font-semibold leading-6 text-gray-900">Get exclusive news</h3>
<p class="mt-2 text-sm leading-6 text-gray-600">Join our newsletter for the latest updates and exclusive member offers.</p>
<form method="POST" action="#" class="mt-6">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-sm sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3 py-1.5 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex items-center gap-6 md:order-2">
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-500 md:order-1 md:mt-0">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<footer aria-labelledby="footer-heading" class="bg-gray-900 pb-12 pt-16 sm:pt-24 lg:pt-32">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-x-8">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-300">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="mt-16 md:grid md:grid-cols-2 md:gap-x-8 xl:col-span-2 xl:mt-0">
<div class="grid grid-cols-2 gap-x-8">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Press</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Contact</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">News</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Partners</a>
</li>
</ul>
</div>
</div>
<div class="mt-16 md:mt-0">
<h3 class="text-sm font-semibold leading-6 text-white">Get exclusive news</h3>
<p class="mt-2 text-sm leading-6 text-gray-300">Join our newsletter for the latest updates and exclusive member offers.</p>
<form method="POST" action="#" class="mt-6">
<div class="flex flex-col flex-wrap gap-4 sm:max-w-sm sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white/5 px-3 py-1.5 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex items-center gap-6 md:order-2">
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<footer aria-labelledby="footer-heading" class="bg-white py-12">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="items-start lg:flex lg:justify-between">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Get exclusive news</h3>
<p class="mt-2 text-sm leading-6 text-gray-600">Join our newsletter for the latest updates and exclusive member offers.</p>
</div>
<form method="POST" action="#" class="mt-6 sm:w-full sm:max-w-sm lg:mt-0">
<div class="flex flex-col flex-wrap gap-4 sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white px-3 py-1.5 text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
<div class="mt-8 grid grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-900/10 pt-16 sm:pt-20 lg:pt-24 xl:grid-cols-3">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-600">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="grid grid-cols-2 gap-x-8 xl:col-span-2">
<div class="sm:grid sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Press</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Contact</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Help Center</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">FAQs</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Community</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Feedback</a>
</li>
</ul>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-semibold leading-6 text-gray-900">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">News</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Partners</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Privacy Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Terms of Service</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Cookie Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-600 hover:text-gray-900">Disclaimer</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex items-center gap-6 md:order-2">
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-400 hover:text-gray-500" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-500 md:order-1 md:mt-0">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<footer aria-labelledby="footer-heading" class="bg-gray-900 py-12">
<h2 id="footer-heading" class="sr-only">Footer</h2>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="items-start lg:flex lg:justify-between">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Get exclusive news</h3>
<p class="mt-2 text-sm leading-6 text-gray-300">Join our newsletter for the latest updates and exclusive member offers.</p>
</div>
<form method="POST" action="#" class="mt-6 sm:w-full sm:max-w-sm lg:mt-0">
<div class="flex flex-col flex-wrap gap-4 sm:flex-row">
<div class="flex-auto">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" placeholder="Enter your email" class="w-full rounded-md border-0 bg-white/5 px-3 py-1.5 text-base text-white shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6" />
</div>
<button type="submit" class="flex-none rounded-md bg-pink-500 px-3 py-1.5 text-sm font-semibold leading-6 text-white hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Subscribe</button>
</div>
</form>
</div>
<div class="mt-8 grid grid-cols-1 gap-x-8 gap-y-16 border-t border-white/10 pt-16 sm:pt-20 lg:pt-24 xl:grid-cols-3">
<div>
<img class="h-8" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Company name" />
<p class="mt-8 text-sm leading-6 text-gray-300">Helping businesses grow with easy-to-use software solutions that scale.</p>
</div>
<div class="grid grid-cols-2 gap-x-8 xl:col-span-2">
<div class="sm:grid sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">About us</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Careers</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Blog</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Press</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Contact</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-white">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Help Center</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">FAQs</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Documentation</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Community</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Feedback</a>
</li>
</ul>
</div>
</div>
<div class="sm:grid sm:grid-cols-2 sm:gap-x-8">
<div>
<h3 class="text-sm font-semibold leading-6 text-white">Explore</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Features</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Success Stories</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Pricing</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">News</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Partners</a>
</li>
</ul>
</div>
<div class="mt-10 sm:mt-0">
<h3 class="text-sm font-semibold leading-6 text-white">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Privacy Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Terms of Service</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Cookie Policy</a>
</li>
<li>
<a href="#" class="text-sm leading-6 text-gray-300 hover:text-white">Disclaimer</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24">
<div class="flex items-center gap-6 md:order-2">
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">X</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">LinkedIn</span>
<svg class="h-5 w-5" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" aria-hidden="true">
<path style="display: inline; fill-rule: evenodd; clip-rule: evenodd" d="M116.504,500.219V170.654H6.975v329.564H116.504 L116.504,500.219z M61.751,125.674c38.183,0,61.968-25.328,61.968-56.953c-0.722-32.328-23.785-56.941-61.252-56.941 C24.994,11.781,0.5,36.394,0.5,68.722c0,31.625,23.772,56.953,60.53,56.953H61.751L61.751,125.674z M177.124,500.219 c0,0,1.437-298.643,0-329.564H286.67v47.794h-0.727c14.404-22.49,40.354-55.533,99.44-55.533 c72.085,0,126.116,47.103,126.116,148.333v188.971H401.971V323.912c0-44.301-15.848-74.531-55.497-74.531 c-30.254,0-48.284,20.38-56.202,40.08c-2.897,7.012-3.602,16.861-3.602,26.711v184.047H177.124L177.124,500.219z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Facebook</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M30.996 16.091c-0.001-8.281-6.714-14.994-14.996-14.994s-14.996 6.714-14.996 14.996c0 7.455 5.44 13.639 12.566 14.8l0.086 0.012v-10.478h-3.808v-4.336h3.808v-3.302c-0.019-0.167-0.029-0.361-0.029-0.557 0-2.923 2.37-5.293 5.293-5.293 0.141 0 0.281 0.006 0.42 0.016l-0.018-0.001c1.199 0.017 2.359 0.123 3.491 0.312l-0.134-0.019v3.69h-1.892c-0.086-0.012-0.185-0.019-0.285-0.019-1.197 0-2.168 0.97-2.168 2.168 0 0.068 0.003 0.135 0.009 0.202l-0.001-0.009v2.812h4.159l-0.665 4.336h-3.494v10.478c7.213-1.174 12.653-7.359 12.654-14.814v-0z"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">Instagram</span>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="currentColor"></path>
<path d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z" fill="currentColor"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65396 4.27606C1 5.55953 1 7.23969 1 10.6V13.4C1 16.7603 1 18.4405 1.65396 19.7239C2.2292 20.8529 3.14708 21.7708 4.27606 22.346C5.55953 23 7.23969 23 10.6 23H13.4C16.7603 23 18.4405 23 19.7239 22.346C20.8529 21.7708 21.7708 20.8529 22.346 19.7239C23 18.4405 23 16.7603 23 13.4V10.6C23 7.23969 23 5.55953 22.346 4.27606C21.7708 3.14708 20.8529 2.2292 19.7239 1.65396C18.4405 1 16.7603 1 13.4 1H10.6C7.23969 1 5.55953 1 4.27606 1.65396C3.14708 2.2292 2.2292 3.14708 1.65396 4.27606ZM13.4 3H10.6C8.88684 3 7.72225 3.00156 6.82208 3.0751C5.94524 3.14674 5.49684 3.27659 5.18404 3.43597C4.43139 3.81947 3.81947 4.43139 3.43597 5.18404C3.27659 5.49684 3.14674 5.94524 3.0751 6.82208C3.00156 7.72225 3 8.88684 3 10.6V13.4C3 15.1132 3.00156 16.2777 3.0751 17.1779C3.14674 18.0548 3.27659 18.5032 3.43597 18.816C3.81947 19.5686 4.43139 20.1805 5.18404 20.564C5.49684 20.7234 5.94524 20.8533 6.82208 20.9249C7.72225 20.9984 8.88684 21 10.6 21H13.4C15.1132 21 16.2777 20.9984 17.1779 20.9249C18.0548 20.8533 18.5032 20.7234 18.816 20.564C19.5686 20.1805 20.1805 19.5686 20.564 18.816C20.7234 18.5032 20.8533 18.0548 20.9249 17.1779C20.9984 16.2777 21 15.1132 21 13.4V10.6C21 8.88684 20.9984 7.72225 20.9249 6.82208C20.8533 5.94524 20.7234 5.49684 20.564 5.18404C20.1805 4.43139 19.5686 3.81947 18.816 3.43597C18.5032 3.27659 18.0548 3.14674 17.1779 3.0751C16.2777 3.00156 15.1132 3 13.4 3Z" fill="currentColor"></path>
</svg>
</a>
<a class="text-gray-500 hover:text-gray-400" href="#">
<span class="sr-only">GitHub</span>
<svg class="h-5 w-5" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
<path d="M24,1.9a21.6,21.6,0,0,0-6.8,42.2c1,.2,1.8-.9,1.8-1.8V39.4c-6,1.3-7.9-2.9-7.9-2.9a6.5,6.5,0,0,0-2.2-3.2C6.9,31.9,9,32,9,32a4.3,4.3,0,0,1,3.3,2c1.7,2.9,5.5,2.6,6.7,2.1a5.4,5.4,0,0,1,.5-2.9C12.7,32,9,28,9,22.6A10.7,10.7,0,0,1,11.9,15a6.2,6.2,0,0,1,.3-6.4,8.9,8.9,0,0,1,6.4,2.9,15.1,15.1,0,0,1,5.4-.8,17.1,17.1,0,0,1,5.4.7,9,9,0,0,1,6.4-2.8,6.5,6.5,0,0,1,.4,6.4A10.7,10.7,0,0,1,39,22.6C39,28,35.3,32,28.5,33.2a5.4,5.4,0,0,1,.5,2.9v6.2a1.8,1.8,0,0,0,1.9,1.8A21.7,21.7,0,0,0,24,1.9Z" />
</svg>
</a>
</div>
<p class="mt-6 text-sm leading-6 text-gray-400 md:order-1 md:mt-0">© 2024 Your Company. All right reserved.</p>
</div>
</div>
</footer><footer class="bg-white py-12">
<div class="mx-auto max-w-7xl px-6 md:flex md:items-center md:justify-between lg:px-8">
<img class="h-8 mx-auto md:mx-0" src="https://htmlwind.com/assets/images/logo/logoipsum-283.svg" alt="Company name" />
<p class="mt-8 text-center text-sm leading-6 text-gray-500 md:mt-0 md:text-start">© 2024 Your Company. All right reserved.</p>
</div>
</footer><footer class="bg-gray-900 py-12">
<div class="mx-auto max-w-7xl px-6 md:flex md:items-center md:justify-between lg:px-8">
<img class="h-8 mx-auto md:mx-0" src="https://htmlwind.com/assets/images/logo/logoipsum-white-283.svg" alt="Company name" />
<p class="mt-8 text-center text-sm leading-6 text-gray-400 md:mt-0 md:text-start">© 2024 Your Company. All right reserved.</p>
</div>
</footer>Frequently asked questions
-
Simple single-row, centered with socials, three-column links, four-column links, footer with newsletter input, and dark variants of most of these.
-
Most do. They're inline SVGs for platforms like Twitter/X, GitHub, LinkedIn, Instagram. Swap them out for whatever you need.
-
Yes, there are a few footer variants with that built in. They use @tailwindcss/forms, which will be flagged in the code panel.
-
Yep. Multi-column footers go to single column on small screens.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.