Footer
The Footer template: Essential links, info, and contact details at the bottom, enhancing user experience and credibility.
Simple footer
View code
<footer class="footer">
<div class="footer-top">
<div class="footer-item">
<h4 class="mb-4 font-semibold text-white">Services</h4>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Customer service</a></li>
<li><a href="#" class="text-sm link white">Sell products</a></li>
<li><a href="#" class="text-sm link white">Manage store</a></li>
<li><a href="#" class="text-sm link white">Your e-commerce</a></li>
</ul>
</div>
<div class="footer-item">
<h5 class="mb-4 font-medium text-white">Useful links</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Categories</a></li>
<li><a href="#" class="text-sm link white">Products</a></li>
<li><a href="#" class="text-sm link white">Offers</a></li>
<li><a href="#" class="text-sm link white">Store</a></li>
</ul>
</div>
<div class="footer-item">
<h5 class="mb-4 font-medium text-white">Information</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">About us</a></li>
<li><a href="#" class="text-sm link white">Blog</a></li>
<li><a href="#" class="text-sm link white">FQAs</a></li>
<li><a href="#" class="text-sm link white">Terms and conditions</a></li>
</ul>
</div>
<div class="footer-item">
<h5 class="mb-4 font-medium text-white">Contact us</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Support</a></li>
<li><a href="#" class="text-sm link white">Help</a></li>
<li><a href="#" class="text-sm link white">Office</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p class="text-center copyright">Not Idea UI Templates</p>
</div>
</footer>
Simple dark footer
View code
<footer class="py-16 bg-gray-900 footer px-14">
<div class="footer-top !p-0 !bg-transparent mb-10">
<div class="w-full lg:w-4/12">
<h4 class="mb-4 font-semibold text-white">Not Idea UI</h4>
<p class="text-slate-200">The Framework CSS you need for your next project.</p>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium text-white">Services</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Customer service</a></li>
<li><a href="#" class="text-sm link white">Sell products</a></li>
<li><a href="#" class="text-sm link white">Manage store</a></li>
<li><a href="#" class="text-sm link white">Your e-commerce</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium text-white">Useful links</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Categories</a></li>
<li><a href="#" class="text-sm link white">Products</a></li>
<li><a href="#" class="text-sm link white">Offers</a></li>
<li><a href="#" class="text-sm link white">Store</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium text-white">Information</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">About us</a></li>
<li><a href="#" class="text-sm link white">Blog</a></li>
<li><a href="#" class="text-sm link white">FQAs</a></li>
<li><a href="#" class="text-sm link white">Terms and conditions</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium text-white">Contact us</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Support</a></li>
<li><a href="#" class="text-sm link white">Help</a></li>
<li><a href="#" class="text-sm link white">Office</a></li>
</ul>
</div>
</div>
<div class="footer-bottom !p-0 !bg-transparent">
<p class="text-center copyright">Not Idea UI Templates</p>
</div>
</footer>
Simple dark footer with media
View code
<footer class="py-16 footer bg-zinc-900 px-14">
<div class="footer-top !p-0 !bg-transparent mb-10">
<div class="w-full lg:w-4/12">
<h4 class="mb-4 font-semibold text-white">Not Idea UI</h4>
<p class="text-slate-200">The Framework CSS you need for your next project.</p>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium text-white">Information</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">About us</a></li>
<li><a href="#" class="text-sm link white">Blog</a></li>
<li><a href="#" class="text-sm link white">FQAs</a></li>
<li><a href="#" class="text-sm link white">Terms and conditions</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium text-white">Contact us</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link white">Support</a></li>
<li><a href="#" class="text-sm link white">Help</a></li>
<li><a href="#" class="text-sm link white">Office</a></li>
<li><a href="#" class="text-sm link white">Customer service</a></li>
</ul>
</div>
<div class="w-full lg:w-4/12">
<h5 class="mb-4 font-medium text-white">Social media</h5>
<ul class="flex items-center gap-x-2">
<li>
<a href="#" class="button button-primary is-button-icon"><i class="bi bi-facebook"></i></a>
</li>
<li>
<a href="#" class="button button-secondary is-button-icon"><i class="bi bi-instagram"></i></a>
</li>
<li>
<a href="#" class="button button-tertiary is-button-icon"><i class="bi bi-twitch"></i></a>
</li>
<li>
<a href="#" class="button button-success is-button-icon"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
</div>
<div class="footer-bottom !p-0 !bg-transparent">
<p class="text-center copyright">Not Idea UI Templates</p>
</div>
</footer>
Footer with blogs
View code
<footer class="py-16 footer bg-gray-50 px-14">
<div class="footer-top md:!gap-10 !p-0 !bg-transparent">
<div class="flex-1 w-full md:w-5/12">
<h5 class="mb-4 font-medium">Recent post</h5>
<div class="flex flex-col space-y-6">
<div class="flex flex-wrap gap-5">
<figure class="w-32 h-32 overflow-hidden rounded-sm">
<img src="https://picsum.photos/300/300?random=1" class="object-cover object-center" />
</figure>
<div class="space-y-2 md:flex-1">
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
<p class="text-sm text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla velit quia nesciunt officia cupiditate, delectus blanditiis
dicta pariatur? Asperiores quas sunt est magnam autem dolorem libero, suscipit repellat saepe impedit!
</p>
</div>
</div>
<div class="flex flex-wrap gap-5">
<figure class="w-32 h-32 overflow-hidden rounded-sm">
<img src="https://picsum.photos/300/300?random=2" class="object-cover object-center" />
</figure>
<div class="space-y-2 md:flex-1">
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h6>
<p class="text-sm text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla velit quia nesciunt officia cupiditate, delectus blanditiis
dicta pariatur? Asperiores quas sunt est magnam autem dolorem libero, suscipit repellat saepe impedit!
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full gap-10 md:w-7/12">
<div class="w-full md:w-1/2">
<h5 class="mb-4 font-medium">Follow our social media</h5>
<ul class="flex items-center gap-x-2">
<li>
<a href="#" class="button button-primary is-button-icon"><i class="bi bi-facebook"></i></a>
</li>
<li>
<a href="#" class="button button-secondary is-button-icon"><i class="bi bi-instagram"></i></a>
</li>
<li>
<a href="#" class="button button-tertiary is-button-icon"><i class="bi bi-twitch"></i></a>
</li>
<li>
<a href="#" class="button button-success is-button-icon"><i class="bi bi-twitter"></i></a>
</li>
</ul>
</div>
<div class="flex-1 w-full md:w-1/2">
<h5 class="mb-4 font-medium">Any question?</h5>
<a href="#" class="link info"> <i class="bi bi-telephone-fill"></i> +1 000-000-0000 </a>
</div>
<div class="w-full md:w-4/12">
<h5 class="mb-4 font-medium">Services</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">Customer service</a></li>
<li><a href="#" class="text-sm link info">Sell products</a></li>
<li><a href="#" class="text-sm link info">Manage store</a></li>
<li><a href="#" class="text-sm link info">Your e-commerce</a></li>
</ul>
</div>
<div class="w-full md:w-4/12">
<h5 class="mb-4 font-medium">Information</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">About us</a></li>
<li><a href="#" class="text-sm link info">Blog</a></li>
<li><a href="#" class="text-sm link info">FQAs</a></li>
<li><a href="#" class="text-sm link info">Terms and conditions</a></li>
</ul>
</div>
<div class="flex-1 w-full md:w-4/12">
<h5 class="mb-4 font-medium">Contact us</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">Support</a></li>
<li><a href="#" class="text-sm link info">Help</a></li>
<li><a href="#" class="text-sm link info">Office</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom !bg-transparent border-t mt-10">
<p class="text-center !text-gray-700 copyright">Not Idea UI Templates</p>
</div>
</footer>
Smooth color Footer
View code
<footer class="footer">
<div class="footer-top !bg-sky-50">
<div class="w-full lg:w-4/12">
<h4 class="mb-4 font-semibold">Not Idea UI</h4>
<p class="text-slate-500">The Framework CSS you need for your next project.</p>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium">Services</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">Customer service</a></li>
<li><a href="#" class="text-sm link info">Sell products</a></li>
<li><a href="#" class="text-sm link info">Manage store</a></li>
<li><a href="#" class="text-sm link info">Your e-commerce</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium">Useful links</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">Categories</a></li>
<li><a href="#" class="text-sm link info">Products</a></li>
<li><a href="#" class="text-sm link info">Offers</a></li>
<li><a href="#" class="text-sm link info">Store</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium">Information</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">About us</a></li>
<li><a href="#" class="text-sm link info">Blog</a></li>
<li><a href="#" class="text-sm link info">FQAs</a></li>
<li><a href="#" class="text-sm link info">Terms and conditions</a></li>
</ul>
</div>
<div class="w-full md:w-6/12 lg:w-2/12">
<h5 class="mb-4 font-medium">Contact us</h5>
<ul class="space-y-1">
<li><a href="#" class="text-sm link info">Support</a></li>
<li><a href="#" class="text-sm link info">Help</a></li>
<li><a href="#" class="text-sm link info">Office</a></li>
</ul>
</div>
</div>
<div class="footer-bottom !bg-sky-200">
<p class="text-center copyright !text-gray-700">Not Idea UI Templates</p>
</div>
</footer>