Footers
The website footer is the section of content at the very bottom of a web page. It typically contains a copyright notice, link to a privacy policy, sitemap, logo, contact information, social media icons, and an email sign-up form. In short, a footer contains information that improves a website's overall usability.
Variations
Three Columns
Copy as:
copydone
<!-- Component: Three Columns Footer -->
<footer class="text-slate-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-4" aria-labelledby="footer-product-3">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-product-3">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-4" aria-labelledby="footer-about-3">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-about-3">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-4" aria-labelledby="footer-get-in-touch-3">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-get-in-touch-3">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Three Columns Footer -->Four Columns
Copy as:
copydone
<!-- Component: Four Columns Footer -->
<footer class="text-slate-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-product-4">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-product-4">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-docs-4">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-docs-4">Docs & Help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-about-4">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-about-4">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-get-in-touch-4">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-get-in-touch-4">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Four Columns Footer -->Three Columns with Sub Footer
Copy as:
copydone
<!-- Component: Footer with Three Columns and Sub Footer -->
<footer class="text-slate-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-4" aria-labelledby="footer-product-3-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-product-3-sub">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-4" aria-labelledby="footer-about-3-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-about-3-sub">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-4" aria-labelledby="footer-get-in-touch-3-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-get-in-touch-3-sub">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Sub Footer -->
<div class="py-4 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid items-center grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<a id="WindUI-3-sub" aria-label="WindUI logo" aria-current="page" class="flex items-center col-span-1 gap-2 text-base font-medium leading-6 whitespace-nowrap focus:outline-none md:col-span-4 lg:col-span-6" href="javascript:void(0)">
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 shrink-0 bg-emerald-500">
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.1121 88.1134L150.026 150.027L150.027 150.027L150.027 150.027L150.028 150.027L150.027 150.026L88.1133 88.1122L88.1121 88.1134ZM273.878 273.877C272.038 274.974 196.128 319.957 165.52 289.349L88.1124 211.942L26.1434 273.911C26.1434 273.911 -20.3337 196.504 10.651 165.519L88.1121 88.1134L26.1417 26.1433C26.1417 26.1433 69.6778 0.00338007 104.519 0H0V300H300V0H104.533C116.144 0.00112664 126.789 2.90631 134.534 10.651L211.941 88.1123L273.877 26.177C274.974 28.0159 319.957 103.926 289.349 134.535L211.942 211.942L273.878 273.877ZM273.878 273.877L273.912 273.857V273.911L273.878 273.877ZM273.877 26.177L273.911 26.1429H273.857C273.857 26.1429 273.863 26.1544 273.877 26.177Z" fill="#f1f5f9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H300V300H0V0ZM150.026 150.025C121.715 99.731 88.1131 88.1122 88.1131 88.1122L10.6508 165.519C10.6508 165.519 26.143 150.027 150.026 150.027H150.027C150.026 150.027 150.026 150.027 150.026 150.027L150.026 150.027C99.731 178.339 88.1124 211.941 88.1124 211.941L165.52 289.348C165.52 289.348 150.032 273.86 150.027 150.027H150.029C178.341 200.323 211.944 211.942 211.944 211.942L289.352 134.535C289.352 134.535 273.864 150.023 150.027 150.027V150.027L150.027 150.027C200.322 121.715 211.941 88.1125 211.941 88.1125L134.534 10.651C134.534 10.651 150.026 26.1431 150.026 150.025ZM150.027 150.027L150.026 150.027C150.026 150.026 150.026 150.026 150.026 150.025C150.026 150.025 150.027 150.026 150.027 150.027ZM150.027 150.027L150.027 150.026L150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027L150.027 150.027ZM150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027H150.027L150.027 150.027Z" fill="rgba(255, 255, 255, .2)" />
</svg>
Brand
</a>
<nav class="col-span-3 md:col-span-4 lg:col-span-6" aria-labelledby="subfooter-links">
<h3 class="sr-only" id="subfooter-links">Get in touch</h3>
<ul class="flex flex-wrap items-center justify-end gap-2 lg:gap-4">
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> T&C </a>
</li>
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Privacy</a>
</li>
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Cookies </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Footer with Three Columns and Sub Footer -->Four Columns with Sub Footer
Copy as:
copydone
<!-- Component: Footer with Four Columns and Sub Footer -->
<footer class="text-slate-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-product-4-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-product-4-sub">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-docs-4-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-docs-4-sub">Docs & help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-about-4-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-about-4-sub">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-get-in-touch-4-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-get-in-touch-4-sub">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Sub Footer -->
<div class="py-4 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid items-center grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<a id="WindUI-4-sub" aria-label="WindUI logo" aria-current="page" class="flex items-center col-span-1 gap-2 text-base font-medium leading-6 whitespace-nowrap focus:outline-none md:col-span-4 lg:col-span-6" href="javascript:void(0)">
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 shrink-0 bg-emerald-500">
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.1121 88.1134L150.026 150.027L150.027 150.027L150.027 150.027L150.028 150.027L150.027 150.026L88.1133 88.1122L88.1121 88.1134ZM273.878 273.877C272.038 274.974 196.128 319.957 165.52 289.349L88.1124 211.942L26.1434 273.911C26.1434 273.911 -20.3337 196.504 10.651 165.519L88.1121 88.1134L26.1417 26.1433C26.1417 26.1433 69.6778 0.00338007 104.519 0H0V300H300V0H104.533C116.144 0.00112664 126.789 2.90631 134.534 10.651L211.941 88.1123L273.877 26.177C274.974 28.0159 319.957 103.926 289.349 134.535L211.942 211.942L273.878 273.877ZM273.878 273.877L273.912 273.857V273.911L273.878 273.877ZM273.877 26.177L273.911 26.1429H273.857C273.857 26.1429 273.863 26.1544 273.877 26.177Z" fill="#f1f5f9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H300V300H0V0ZM150.026 150.025C121.715 99.731 88.1131 88.1122 88.1131 88.1122L10.6508 165.519C10.6508 165.519 26.143 150.027 150.026 150.027H150.027C150.026 150.027 150.026 150.027 150.026 150.027L150.026 150.027C99.731 178.339 88.1124 211.941 88.1124 211.941L165.52 289.348C165.52 289.348 150.032 273.86 150.027 150.027H150.029C178.341 200.323 211.944 211.942 211.944 211.942L289.352 134.535C289.352 134.535 273.864 150.023 150.027 150.027V150.027L150.027 150.027C200.322 121.715 211.941 88.1125 211.941 88.1125L134.534 10.651C134.534 10.651 150.026 26.1431 150.026 150.025ZM150.027 150.027L150.026 150.027C150.026 150.026 150.026 150.026 150.026 150.025C150.026 150.025 150.027 150.026 150.027 150.027ZM150.027 150.027L150.027 150.026L150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027L150.027 150.027ZM150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027H150.027L150.027 150.027Z" fill="rgba(255, 255, 255, .2)" />
</svg>
Brand
</a>
<nav class="col-span-3 md:col-span-4 lg:col-span-6" aria-labelledby="subfooter-links-3-sub">
<h3 class="sr-only" id="subfooter-links-3-sub">Get in touch</h3>
<ul class="flex flex-wrap items-center justify-end gap-2 lg:gap-4">
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> T&C </a>
</li>
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Privacy</a>
</li>
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Cookies </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Footer with Four Columns and Sub Footer -->Five Columns with Logo
Copy as:
copydone
<!-- Component: Five Columns Footer with Logo -->
<footer class="text-slate-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<div class="col-span-4 md:col-span-8 lg:col-span-4" aria-labelledby="footer-header">
<a id="WindUI-5-logo" aria-label="WindUI logo" aria-current="page" class="flex items-center gap-2 mb-6 text-base font-medium leading-6 whitespace-nowrap focus:outline-none text-slate-700" href="javascript:void(0)">
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 shrink-0 bg-emerald-500">
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.1121 88.1134L150.026 150.027L150.027 150.027L150.027 150.027L150.028 150.027L150.027 150.026L88.1133 88.1122L88.1121 88.1134ZM273.878 273.877C272.038 274.974 196.128 319.957 165.52 289.349L88.1124 211.942L26.1434 273.911C26.1434 273.911 -20.3337 196.504 10.651 165.519L88.1121 88.1134L26.1417 26.1433C26.1417 26.1433 69.6778 0.00338007 104.519 0H0V300H300V0H104.533C116.144 0.00112664 126.789 2.90631 134.534 10.651L211.941 88.1123L273.877 26.177C274.974 28.0159 319.957 103.926 289.349 134.535L211.942 211.942L273.878 273.877ZM273.878 273.877L273.912 273.857V273.911L273.878 273.877ZM273.877 26.177L273.911 26.1429H273.857C273.857 26.1429 273.863 26.1544 273.877 26.177Z" fill="#f1f5f9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H300V300H0V0ZM150.026 150.025C121.715 99.731 88.1131 88.1122 88.1131 88.1122L10.6508 165.519C10.6508 165.519 26.143 150.027 150.026 150.027H150.027C150.026 150.027 150.026 150.027 150.026 150.027L150.026 150.027C99.731 178.339 88.1124 211.941 88.1124 211.941L165.52 289.348C165.52 289.348 150.032 273.86 150.027 150.027H150.029C178.341 200.323 211.944 211.942 211.944 211.942L289.352 134.535C289.352 134.535 273.864 150.023 150.027 150.027V150.027L150.027 150.027C200.322 121.715 211.941 88.1125 211.941 88.1125L134.534 10.651C134.534 10.651 150.026 26.1431 150.026 150.025ZM150.027 150.027L150.026 150.027C150.026 150.026 150.026 150.026 150.026 150.025C150.026 150.025 150.027 150.026 150.027 150.027ZM150.027 150.027L150.027 150.026L150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027L150.027 150.027ZM150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027H150.027L150.027 150.027Z" fill="rgba(255, 255, 255, .2)" />
</svg>
Brand
</a>
<p>Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app. Just copy and paste them on your Tailwind CSS project.</p>
</div>
<nav class="col-span-2 md:col-span-4 lg:col-span-2" aria-labelledby="footer-product-5-logo">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-product-5-logo">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-2" aria-labelledby="footer-docs-5-logo">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-docs-5-logo">Docs & Help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-2" aria-labelledby="footer-about-5-logo">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-about-5-logo">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-2" aria-labelledby="footer-get-in-touch-5-logo">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-get-in-touch-5-logo">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Five Columns Footer with Logo -->Five Columns with Logo and Sub Footer
Copy as:
copydone
<!-- Component: Five Columns Footer with Logo and Sub Footer -->
<footer class="text-slate-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-product-5-logo-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-product-5-logo-sub">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-docs-5-logo-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-docs-5-logo-sub">Docs & Help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-about-5-logo-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-about-5-logo-sub">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-get-in-touch-5-logo-sub">
<h3 class="mb-6 text-base font-medium text-slate-700" id="footer-get-in-touch-5-logo-sub">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Sub Footer -->
<div class="py-4 text-sm border-t border-slate-200 bg-slate-100">
<div class="container px-6 mx-auto">
<div class="grid items-center grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<a id="WindUI-5-logo-sub" aria-label="WindUI logo" aria-current="page" class="flex items-center col-span-1 gap-2 text-base font-medium leading-6 whitespace-nowrap focus:outline-none md:col-span-4 lg:col-span-6" href="javascript:void(0)">
<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 shrink-0 bg-emerald-500">
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.1121 88.1134L150.026 150.027L150.027 150.027L150.027 150.027L150.028 150.027L150.027 150.026L88.1133 88.1122L88.1121 88.1134ZM273.878 273.877C272.038 274.974 196.128 319.957 165.52 289.349L88.1124 211.942L26.1434 273.911C26.1434 273.911 -20.3337 196.504 10.651 165.519L88.1121 88.1134L26.1417 26.1433C26.1417 26.1433 69.6778 0.00338007 104.519 0H0V300H300V0H104.533C116.144 0.00112664 126.789 2.90631 134.534 10.651L211.941 88.1123L273.877 26.177C274.974 28.0159 319.957 103.926 289.349 134.535L211.942 211.942L273.878 273.877ZM273.878 273.877L273.912 273.857V273.911L273.878 273.877ZM273.877 26.177L273.911 26.1429H273.857C273.857 26.1429 273.863 26.1544 273.877 26.177Z" fill="#f1f5f9" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H300V300H0V0ZM150.026 150.025C121.715 99.731 88.1131 88.1122 88.1131 88.1122L10.6508 165.519C10.6508 165.519 26.143 150.027 150.026 150.027H150.027C150.026 150.027 150.026 150.027 150.026 150.027L150.026 150.027C99.731 178.339 88.1124 211.941 88.1124 211.941L165.52 289.348C165.52 289.348 150.032 273.86 150.027 150.027H150.029C178.341 200.323 211.944 211.942 211.944 211.942L289.352 134.535C289.352 134.535 273.864 150.023 150.027 150.027V150.027L150.027 150.027C200.322 121.715 211.941 88.1125 211.941 88.1125L134.534 10.651C134.534 10.651 150.026 26.1431 150.026 150.025ZM150.027 150.027L150.026 150.027C150.026 150.026 150.026 150.026 150.026 150.025C150.026 150.025 150.027 150.026 150.027 150.027ZM150.027 150.027L150.027 150.026L150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027L150.027 150.027ZM150.027 150.027C150.027 150.027 150.027 150.027 150.027 150.027H150.027L150.027 150.027Z" fill="rgba(255, 255, 255, .2)" />
</svg>
Brand
</a>
<nav class="col-span-3 md:col-span-4 lg:col-span-6" aria-labelledby="subfooter-links-5-logo-sub">
<h3 class="sr-only" id="subfooter-links-5-logo-sub">Get in touch</h3>
<ul class="flex flex-wrap items-center justify-end gap-2 lg:gap-4">
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> T&C </a>
</li>
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Privacy</a>
</li>
<li class="leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Cookies </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Five Columns Footer with Logo and Sub Footer -->Dark Theme
Copy as:
copydone
<!-- Component: Dark Theme Footer -->
<footer class="text-slate-400">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-slate-900 bg-slate-800">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-product-dark">
<h3 class="mb-6 text-base font-medium text-white" id="footer-product-dark">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-docs-dark">
<h3 class="mb-6 text-base font-medium text-white" id="footer-docs-dark">Docs & help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-about-dark">
<h3 class="mb-6 text-base font-medium text-white" id="footer-about-dark">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-get-in-touch-dark">
<h3 class="mb-6 text-base font-medium text-white" id="footer-get-in-touch-dark">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500 focus:text-emerald-600"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Sub Footer -->
<div class="py-4 text-sm border-t border-slate-900 bg-slate-700">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<div class="col-span-2 md:col-span-4 lg:col-span-6">Copyright 2022 Brand</div>
<nav aria-labelledby="footer-social-links-dark" class="col-span-2 text-right md:col-span-4 lg:col-span-6">
<h2 class="sr-only" id="footer-social-links-dark">Social Media Links</h2>
<ul class="flex items-center justify-end gap-4">
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb01-dark desc-tb01-dark">
<title id="title-tb01-dark">Icon title</title>
<desc id="desc-tb01-dark">A more detailed description of the icon</desc>
<path fill="currentColor" fillRule="evenodd" d="M37.2491 3.30238C37.0498 2.18649 36.0513 1.49746 34.9878 1.50395C32.2606 1.5206 29.7927 1.60328 27.6333 1.96988C25.4705 2.33708 23.584 2.99414 22.038 4.18283C18.9929 6.52415 17.4377 10.7872 17.3724 18.3217H11.9552C10.9254 18.3217 9.94522 18.9739 9.74313 20.0674C9.51312 21.312 9.33088 23.311 9.75643 25.8014C9.95527 26.9651 10.9939 27.7324 12.1233 27.7324H17.3703V44.3867C17.3703 45.2169 17.8349 46.0595 18.7834 46.2403C19.5015 46.3773 20.6304 46.5002 22.375 46.5002C24.1168 46.5002 25.347 46.3777 26.1718 46.2437C27.2507 46.0684 27.8777 45.1191 27.8777 44.1186V27.7324H34.9316C36.0256 27.7324 37.0562 27.009 37.2608 25.8665C37.6736 23.5618 37.4742 21.4753 37.2437 20.1563C37.0465 19.0284 36.0444 18.3217 34.9653 18.3217H27.8795C27.8917 16.7111 27.9661 15.4564 28.1447 14.4728C28.341 13.3921 28.6547 12.6875 29.1044 12.2048C29.5502 11.7263 30.1817 11.4104 31.1284 11.2121C32.0832 11.0121 33.3126 10.9408 34.9123 10.9193C36.0128 10.9045 37.0511 10.1718 37.2541 9.01765C37.6718 6.64193 37.4794 4.59202 37.2491 3.30238Z" clipRule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb02-dark desc-tb02-dark">
<title id="title-tb02-dark">Icon title</title>
<desc id="desc-tb02-dark">A more detailed description of the icon</desc>
<path fill="currentColor" d="M34.7229 4.69819C36.9179 5.13151 38.8231 6.226 39.9574 7.46121L44.8741 7.22772C46.162 7.16656 46.9576 8.61264 46.216 9.66758L42.8041 14.5217C43.7777 35.6815 22.2547 49.0961 4.54954 41.2208C3.75067 40.8654 3.58181 40.0439 3.74682 39.4029C3.91015 38.7685 4.4337 38.1304 5.23631 38.0329C7.74782 37.7279 10.886 36.8951 13.5309 34.8102C11.3351 34.4801 8.87383 33.2203 6.77118 31.5522C4.25179 29.5535 2.11595 26.8651 1.53319 24.2321C1.41942 23.7181 1.60805 23.2504 1.94754 22.9478C2.27981 22.6517 2.75116 22.5146 3.22643 22.6022C4.4998 22.8369 6.44397 23.1705 7.93366 23.3225C7.82715 23.2095 7.71399 23.0872 7.59534 22.9561C6.83881 22.1198 5.85466 20.9171 4.947 19.4528C3.13974 16.5372 1.58717 12.5021 2.86967 8.24191C3.04524 7.65872 3.52191 7.3215 4.02883 7.2399C4.52724 7.15967 5.07712 7.31911 5.46709 7.72851C7.80814 10.1862 13.7896 15.4057 22.914 16.1638C22.5823 14.0277 22.368 9.45707 27.2507 6.17582C29.7236 4.51405 32.4029 4.2402 34.7229 4.69819Z" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb03-dark desc-tb03-dark">
<title id="title-tb03-dark">Icon title</title>
<desc id="desc-tb03-dark">A more detailed description of the icon</desc>
<path fill="currentColor" fillRule="evenodd" d="M18.9563 7.52344C18.7526 6.91526 18.1767 6.49018 17.5166 6.51256C13.7277 6.64105 10.4346 7.72034 9.03159 8.24815C8.46409 8.46164 7.98142 8.84195 7.6475 9.35489C6.13235 11.6824 1.35143 20.1396 1.5015 33.9816C1.51112 34.8687 1.87868 35.7421 2.60293 36.3174C4.05518 37.4709 7.22566 39.6169 12.2716 41.1548C13.1338 41.4176 14.1343 41.1791 14.6848 40.3722C15.3668 39.3727 15.9633 38.1197 16.3718 37.1704C16.4818 36.9145 16.7753 36.775 17.0546 36.8566C18.8459 37.3799 21.1512 37.7795 24.0128 37.7795C26.865 37.7795 29.1613 37.3825 30.9459 36.8617C31.2254 36.7802 31.5188 36.9197 31.6289 37.1755C32.0373 38.1241 32.6329 39.3744 33.3137 40.3722C33.8643 41.1791 34.8647 41.4176 35.727 41.1548C40.7729 39.6169 43.9433 37.4709 45.3956 36.3174C46.1198 35.7421 46.4874 34.8687 46.497 33.9816C46.6459 20.2518 41.9432 11.8198 40.3884 9.41269C40.0295 8.85716 39.4986 8.45634 38.8845 8.24366C37.3835 7.72379 33.9285 6.65561 30.4846 6.51532C29.821 6.48828 29.2456 6.91631 29.0422 7.52344L28.5352 9.03687C28.4493 9.293 28.1503 9.47311 27.8343 9.41471C27.0144 9.26322 25.7164 9.09373 24.0128 9.09373C22.2989 9.09373 20.9871 9.26529 20.1611 9.41734C19.8471 9.47513 19.5502 9.29611 19.4648 9.04103L18.9563 7.52344ZM21 25C21 27.7614 18.9853 30 16.5 30C14.0147 30 12 27.7614 12 25C12 22.2386 14.0147 20 16.5 20C18.9853 20 21 22.2386 21 25ZM31.5 30C29.0147 30 27 27.7614 27 25C27 22.2386 29.0147 20 31.5 20C33.9853 20 36 22.2386 36 25C36 27.7614 33.9853 30 31.5 30Z" clipRule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Dark Theme Footer -->Primary Dark Theme
Copy as:
copydone
<!-- Component: Primary Dark Theme Footer -->
<footer class="w-full text-emerald-200">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-emerald-600 bg-emerald-500">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-header">
<h3 class="mb-6 text-base font-medium text-white" id="footer-header">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-header">
<h3 class="mb-6 text-base font-medium text-white" id="footer-header ">Docs & help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-header">
<h3 class="mb-6 text-base font-medium text-white" id="footer-header">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-header">
<h3 class="mb-6 text-base font-medium text-white" id="footer-header">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="#" class="transition-colors duration-300 hover:text-emerald-100 focus:text-emerald-50"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Subfooter -->
<div class="py-4 text-sm border-t border-emerald-700 bg-emerald-600">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<div class="col-span-2 md:col-span-4 lg:col-span-6">Copyright 2022 Brand</div>
<nav aria-labelledby="footer-social-links" class="col-span-2 text-right md:col-span-4 lg:col-span-6">
<h2 class="sr-only" id="footer-social-links">Social Media Links</h2>
<ul class="flex items-center justify-end gap-4">
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb01 desc-tb01">
<title id="title-tb01">Icon title</title>
<desc id="desc-tb01">A more detailed description of the icon</desc>
<path fill="currentColor" fillRule="evenodd" d="M37.2491 3.30238C37.0498 2.18649 36.0513 1.49746 34.9878 1.50395C32.2606 1.5206 29.7927 1.60328 27.6333 1.96988C25.4705 2.33708 23.584 2.99414 22.038 4.18283C18.9929 6.52415 17.4377 10.7872 17.3724 18.3217H11.9552C10.9254 18.3217 9.94522 18.9739 9.74313 20.0674C9.51312 21.312 9.33088 23.311 9.75643 25.8014C9.95527 26.9651 10.9939 27.7324 12.1233 27.7324H17.3703V44.3867C17.3703 45.2169 17.8349 46.0595 18.7834 46.2403C19.5015 46.3773 20.6304 46.5002 22.375 46.5002C24.1168 46.5002 25.347 46.3777 26.1718 46.2437C27.2507 46.0684 27.8777 45.1191 27.8777 44.1186V27.7324H34.9316C36.0256 27.7324 37.0562 27.009 37.2608 25.8665C37.6736 23.5618 37.4742 21.4753 37.2437 20.1563C37.0465 19.0284 36.0444 18.3217 34.9653 18.3217H27.8795C27.8917 16.7111 27.9661 15.4564 28.1447 14.4728C28.341 13.3921 28.6547 12.6875 29.1044 12.2048C29.5502 11.7263 30.1817 11.4104 31.1284 11.2121C32.0832 11.0121 33.3126 10.9408 34.9123 10.9193C36.0128 10.9045 37.0511 10.1718 37.2541 9.01765C37.6718 6.64193 37.4794 4.59202 37.2491 3.30238Z" clipRule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb02 desc-tb02">
<title id="title-tb02">Icon title</title>
<desc id="desc-tb02">A more detailed description of the icon</desc>
<path fill="currentColor" d="M34.7229 4.69819C36.9179 5.13151 38.8231 6.226 39.9574 7.46121L44.8741 7.22772C46.162 7.16656 46.9576 8.61264 46.216 9.66758L42.8041 14.5217C43.7777 35.6815 22.2547 49.0961 4.54954 41.2208C3.75067 40.8654 3.58181 40.0439 3.74682 39.4029C3.91015 38.7685 4.4337 38.1304 5.23631 38.0329C7.74782 37.7279 10.886 36.8951 13.5309 34.8102C11.3351 34.4801 8.87383 33.2203 6.77118 31.5522C4.25179 29.5535 2.11595 26.8651 1.53319 24.2321C1.41942 23.7181 1.60805 23.2504 1.94754 22.9478C2.27981 22.6517 2.75116 22.5146 3.22643 22.6022C4.4998 22.8369 6.44397 23.1705 7.93366 23.3225C7.82715 23.2095 7.71399 23.0872 7.59534 22.9561C6.83881 22.1198 5.85466 20.9171 4.947 19.4528C3.13974 16.5372 1.58717 12.5021 2.86967 8.24191C3.04524 7.65872 3.52191 7.3215 4.02883 7.2399C4.52724 7.15967 5.07712 7.31911 5.46709 7.72851C7.80814 10.1862 13.7896 15.4057 22.914 16.1638C22.5823 14.0277 22.368 9.45707 27.2507 6.17582C29.7236 4.51405 32.4029 4.2402 34.7229 4.69819Z" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-100">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb03 desc-tb03">
<title id="title-tb03">Icon title</title>
<desc id="desc-tb03">A more detailed description of the icon</desc>
<path fill="currentColor" fillRule="evenodd" d="M18.9563 7.52344C18.7526 6.91526 18.1767 6.49018 17.5166 6.51256C13.7277 6.64105 10.4346 7.72034 9.03159 8.24815C8.46409 8.46164 7.98142 8.84195 7.6475 9.35489C6.13235 11.6824 1.35143 20.1396 1.5015 33.9816C1.51112 34.8687 1.87868 35.7421 2.60293 36.3174C4.05518 37.4709 7.22566 39.6169 12.2716 41.1548C13.1338 41.4176 14.1343 41.1791 14.6848 40.3722C15.3668 39.3727 15.9633 38.1197 16.3718 37.1704C16.4818 36.9145 16.7753 36.775 17.0546 36.8566C18.8459 37.3799 21.1512 37.7795 24.0128 37.7795C26.865 37.7795 29.1613 37.3825 30.9459 36.8617C31.2254 36.7802 31.5188 36.9197 31.6289 37.1755C32.0373 38.1241 32.6329 39.3744 33.3137 40.3722C33.8643 41.1791 34.8647 41.4176 35.727 41.1548C40.7729 39.6169 43.9433 37.4709 45.3956 36.3174C46.1198 35.7421 46.4874 34.8687 46.497 33.9816C46.6459 20.2518 41.9432 11.8198 40.3884 9.41269C40.0295 8.85716 39.4986 8.45634 38.8845 8.24366C37.3835 7.72379 33.9285 6.65561 30.4846 6.51532C29.821 6.48828 29.2456 6.91631 29.0422 7.52344L28.5352 9.03687C28.4493 9.293 28.1503 9.47311 27.8343 9.41471C27.0144 9.26322 25.7164 9.09373 24.0128 9.09373C22.2989 9.09373 20.9871 9.26529 20.1611 9.41734C19.8471 9.47513 19.5502 9.29611 19.4648 9.04103L18.9563 7.52344ZM21 25C21 27.7614 18.9853 30 16.5 30C14.0147 30 12 27.7614 12 25C12 22.2386 14.0147 20 16.5 20C18.9853 20 21 22.2386 21 25ZM31.5 30C29.0147 30 27 27.7614 27 25C27 22.2386 29.0147 20 31.5 20C33.9853 20 36 22.2386 36 25C36 27.7614 33.9853 30 31.5 30Z" clipRule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Primary Dark Theme Footer -->Primary Light Theme
Copy as:
copydone
<!-- Component: Primary Light Theme Footer -->
<footer class="w-full text-emerald-500">
<!-- Main footer -->
<div class="pt-16 pb-12 text-sm border-t border-emerald-200 bg-emerald-50">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-product-light">
<h3 class="mb-6 text-base font-medium text-emerald-700" id="footer-product-light">Product</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Features </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Customers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Why us? </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Pricing </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-docs-light">
<h3 class="mb-6 text-base font-medium text-emerald-700" id="footer-docs-light">Docs & help</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Documentation</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Training </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> System status </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> FAQ's </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Help Center </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-about-light">
<h3 class="mb-6 text-base font-medium text-emerald-700" id="footer-about-light">About us</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> About us </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Careers </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Leadership </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Blog</a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Events </a>
</li>
</ul>
</nav>
<nav class="col-span-2 md:col-span-4 lg:col-span-3" aria-labelledby="footer-get-in-touch-light">
<h3 class="mb-6 text-base font-medium text-emerald-700" id="footer-get-in-touch-light">Get in touch</h3>
<ul>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Contact </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Support </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Partners </a>
</li>
<li class="mb-2 leading-6">
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700"> Join research </a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Sub Footer -->
<div class="py-4 text-sm border-t border-emerald-200/90 bg-emerald-100/80">
<div class="container px-6 mx-auto">
<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
<div class="col-span-2 md:col-span-4 lg:col-span-6">Copyright 2022 Brand</div>
<nav aria-labelledby="footer-social-links-light" class="col-span-2 text-right md:col-span-4 lg:col-span-6">
<h2 class="sr-only" id="footer-social-links-light">Social Media Links</h2>
<ul class="flex items-center justify-end gap-4">
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb01-light desc-tb01-light">
<title id="title-tb01-light">Icon title</title>
<desc id="desc-tb01-light">A more detailed description of the icon</desc>
<path fill="currentColor" fillRule="evenodd" d="M37.2491 3.30238C37.0498 2.18649 36.0513 1.49746 34.9878 1.50395C32.2606 1.5206 29.7927 1.60328 27.6333 1.96988C25.4705 2.33708 23.584 2.99414 22.038 4.18283C18.9929 6.52415 17.4377 10.7872 17.3724 18.3217H11.9552C10.9254 18.3217 9.94522 18.9739 9.74313 20.0674C9.51312 21.312 9.33088 23.311 9.75643 25.8014C9.95527 26.9651 10.9939 27.7324 12.1233 27.7324H17.3703V44.3867C17.3703 45.2169 17.8349 46.0595 18.7834 46.2403C19.5015 46.3773 20.6304 46.5002 22.375 46.5002C24.1168 46.5002 25.347 46.3777 26.1718 46.2437C27.2507 46.0684 27.8777 45.1191 27.8777 44.1186V27.7324H34.9316C36.0256 27.7324 37.0562 27.009 37.2608 25.8665C37.6736 23.5618 37.4742 21.4753 37.2437 20.1563C37.0465 19.0284 36.0444 18.3217 34.9653 18.3217H27.8795C27.8917 16.7111 27.9661 15.4564 28.1447 14.4728C28.341 13.3921 28.6547 12.6875 29.1044 12.2048C29.5502 11.7263 30.1817 11.4104 31.1284 11.2121C32.0832 11.0121 33.3126 10.9408 34.9123 10.9193C36.0128 10.9045 37.0511 10.1718 37.2541 9.01765C37.6718 6.64193 37.4794 4.59202 37.2491 3.30238Z" clipRule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb02-light desc-tb02-light">
<title id="title-tb02-light">Icon title</title>
<desc id="desc-tb02-light">A more detailed description of the icon</desc>
<path fill="currentColor" d="M34.7229 4.69819C36.9179 5.13151 38.8231 6.226 39.9574 7.46121L44.8741 7.22772C46.162 7.16656 46.9576 8.61264 46.216 9.66758L42.8041 14.5217C43.7777 35.6815 22.2547 49.0961 4.54954 41.2208C3.75067 40.8654 3.58181 40.0439 3.74682 39.4029C3.91015 38.7685 4.4337 38.1304 5.23631 38.0329C7.74782 37.7279 10.886 36.8951 13.5309 34.8102C11.3351 34.4801 8.87383 33.2203 6.77118 31.5522C4.25179 29.5535 2.11595 26.8651 1.53319 24.2321C1.41942 23.7181 1.60805 23.2504 1.94754 22.9478C2.27981 22.6517 2.75116 22.5146 3.22643 22.6022C4.4998 22.8369 6.44397 23.1705 7.93366 23.3225C7.82715 23.2095 7.71399 23.0872 7.59534 22.9561C6.83881 22.1198 5.85466 20.9171 4.947 19.4528C3.13974 16.5372 1.58717 12.5021 2.86967 8.24191C3.04524 7.65872 3.52191 7.3215 4.02883 7.2399C4.52724 7.15967 5.07712 7.31911 5.46709 7.72851C7.80814 10.1862 13.7896 15.4057 22.914 16.1638C22.5823 14.0277 22.368 9.45707 27.2507 6.17582C29.7236 4.51405 32.4029 4.2402 34.7229 4.69819Z" />
</svg>
</a>
</li>
<li>
<a href="javascript:void(0)" class="transition-colors duration-300 hover:text-emerald-600 focus:text-emerald-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" height="16" width="16" class="w-4 h-4 shrink-0" role="graphics-symbol" aria-labelledby="title-tb03-light desc-tb03-light">
<title id="title-tb03-light">Icon title</title>
<desc id="desc-tb03-light">A more detailed description of the icon</desc>
<path fill="currentColor" fillRule="evenodd" d="M18.9563 7.52344C18.7526 6.91526 18.1767 6.49018 17.5166 6.51256C13.7277 6.64105 10.4346 7.72034 9.03159 8.24815C8.46409 8.46164 7.98142 8.84195 7.6475 9.35489C6.13235 11.6824 1.35143 20.1396 1.5015 33.9816C1.51112 34.8687 1.87868 35.7421 2.60293 36.3174C4.05518 37.4709 7.22566 39.6169 12.2716 41.1548C13.1338 41.4176 14.1343 41.1791 14.6848 40.3722C15.3668 39.3727 15.9633 38.1197 16.3718 37.1704C16.4818 36.9145 16.7753 36.775 17.0546 36.8566C18.8459 37.3799 21.1512 37.7795 24.0128 37.7795C26.865 37.7795 29.1613 37.3825 30.9459 36.8617C31.2254 36.7802 31.5188 36.9197 31.6289 37.1755C32.0373 38.1241 32.6329 39.3744 33.3137 40.3722C33.8643 41.1791 34.8647 41.4176 35.727 41.1548C40.7729 39.6169 43.9433 37.4709 45.3956 36.3174C46.1198 35.7421 46.4874 34.8687 46.497 33.9816C46.6459 20.2518 41.9432 11.8198 40.3884 9.41269C40.0295 8.85716 39.4986 8.45634 38.8845 8.24366C37.3835 7.72379 33.9285 6.65561 30.4846 6.51532C29.821 6.48828 29.2456 6.91631 29.0422 7.52344L28.5352 9.03687C28.4493 9.293 28.1503 9.47311 27.8343 9.41471C27.0144 9.26322 25.7164 9.09373 24.0128 9.09373C22.2989 9.09373 20.9871 9.26529 20.1611 9.41734C19.8471 9.47513 19.5502 9.29611 19.4648 9.04103L18.9563 7.52344ZM21 25C21 27.7614 18.9853 30 16.5 30C14.0147 30 12 27.7614 12 25C12 22.2386 14.0147 20 16.5 20C18.9853 20 21 22.2386 21 25ZM31.5 30C29.0147 30 27 27.7614 27 25C27 22.2386 29.0147 20 31.5 20C33.9853 20 36 22.2386 36 25C36 27.7614 33.9853 30 31.5 30Z" clipRule="evenodd" />
</svg>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- End Primary Light Theme Footer -->Usage
The website footer is the section of content at the very bottom of a web app. Use the footer to add:
- Links to other sections of your app
- links to Privacy Policy, Terms & conditions etc.
- Logo, about text or even contact information
- Social media icons
Specs
The footer is using the native <footer> element. It consists of 2 main parts:
- Main footer: it consists of columns that can contain navigation links, about us text, brand and contact information. Text size is 0.875rem (14px) and 1rem (16px) for the navigation column headers.
- Sub footer: you can add secondary links (like links to Terms and Conditions, Privacy policy etc), social links or contact information.
Accessibility notes
- Footer is implemented using the native
<footer>html tag. - All navigation columns should use the
<nav>tag. If you have to use a more generic element such as a<div>add arole="navigation"to every navbar column to explicitly identify it as a landmark region for users of assistive technologies. - Menus should be labelled according to their individual function. Use an
aria-labelledby=""to easily add context to the different navigation columns.