Tailwind CSS Footer - Nuanxa
Komponen footer digunakan untuk menampilkan informasi situs, tautan, dan konten tambahan di bagian bawah halaman.
Default footer
Footer dasar dengan tata letak dan teks sederhana.
<footer
class="bg-white dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 my-6 p-4 flex items-center justify-center"
>
<span class="text-gray-500 dark:text-gray-400">
© 2026 Nuanxa. All rights reserved.</span
>
</footer>
Footer icon
Footer dengan ikon media sosial atau aksi.
<footer
class="flex lg:flex-row flex-col justify-between bg-white dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 my-6 p-4 space-y-6 items-center"
>
<div class="flex justify-between items-center gap-2">
<img
src="/assets/img/logo/nuanxa-icon-dark.png"
class="w-7 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-icon-light.png"
class="w-7 dark:hidden block"
alt="Logo Light"
/>
<span class="text-gray-500 dark:text-gray-400">
© 2026 Nuanxa. All rights reserved.</span
>
</div>
<div class="flex items-center gap-2">
<span class="text-xl text-red-500 fab fa-instagram"></span>
<span class="text-xl text-blue-700 fab fa-facebook"></span>
<span class="text-xl text-red-700 fab fa-youtube"></span>
</div>
</footer>
Footer menu
Footer dengan tautan navigasi atau bagian menu.
<footer
class="bg-white dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 my-6 p-4"
>
<div
class="flex flex-col md:flex-row md:items-center md:justify-between gap-6"
>
<!-- Logo -->
<div class="flex items-center gap-2 justify-center md:justify-start">
<img
src="/assets/img/logo/nuanxa-dark.png"
class="w-7 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-light.png"
class="w-7 dark:hidden block"
alt="Logo Light"
/>
</div>
<!-- Menu -->
<ul class="flex flex-row items-center gap-4 font-medium text-base">
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Privacy Policy</a
>
</li>
<li>
<a
href="#"
class="text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Terms of Service</a
>
</li>
</ul>
</div>
<!-- Bottom -->
<div class="border-t border-gray-300 dark:border-gray-700 my-6 pt-4">
<span class="block text-center text-gray-500 dark:text-gray-400">
© 2026 Nuanxa. All rights reserved.
</span>
</div>
</footer>
Footer newsletter
Footer dengan formulir langganan email.
<footer
class="bg-white dark:bg-gray-800 border-t border-gray-300 dark:border-gray-700 my-6 p-6"
>
<!-- Top -->
<div class="grid grid-cols-2 lg:grid-cols-5 gap-10 mb-10">
<!-- Section 1 -->
<div class="space-y-4">
<h1 class="font-semibold text-gray-900 dark:text-gray-200">Section</h1>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Privacy Policy</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Terms of Service</a
>
</div>
<!-- Section 2 -->
<div class="space-y-4">
<h1 class="font-semibold text-gray-900 dark:text-gray-200">Section</h1>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Privacy Policy</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Terms of Service</a
>
</div>
<!-- Section 3 -->
<div class="space-y-4">
<h1 class="font-semibold text-gray-900 dark:text-gray-200">Section</h1>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>About</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Contact</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Privacy Policy</a
>
<a
href="#a"
class="block text-gray-900 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-400 transition"
>Terms of Service</a
>
</div>
<!-- Newsletter -->
<div class="space-y-4 col-span-2 lg:col-span-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
Subscribe to our Newsletter
</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">
Get the latest updates and news directly in your inbox.
</p>
<form class="flex flex-col gap-3">
<div class="relative mb-5 autofill-light dark:autofill-dark">
<div class="flex">
<input
type="email"
id="email"
placeholder="Email address"
class="w-full h-10 px-3 text-sm leading-none rounded-l-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<button
class="h-10 px-4 text-sm leading-none rounded-r-lg bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition flex items-center justify-center"
>
Subscribe
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Bottom -->
<div
class="flex flex-col md:flex-row items-center justify-between gap-4 border-t border-gray-300 dark:border-gray-700 pt-6"
>
<div class="flex items-center gap-2">
<img
src="/assets/img/logo/nuanxa-icon-dark.png"
class="w-7 hidden dark:block"
alt="Logo Dark"
/>
<img
src="/assets/img/logo/nuanxa-icon-light.png"
class="w-7 dark:hidden block"
alt="Logo Light"
/>
<span class="text-gray-500 dark:text-gray-400 text-sm">
© 2026 Nuanxa. All rights reserved.
</span>
</div>
<div class="flex items-center gap-3">
<span class="text-xl text-red-500 fab fa-instagram"></span>
<span class="text-xl text-blue-700 fab fa-facebook"></span>
<span class="text-xl text-red-700 fab fa-youtube"></span>
</div>
</div>
</footer>