Footer Navigation Component
A responsive footer navigation component with a dark theme, suitable for a portfolio website. It features a monochromatic color scheme with different shades of a single color, medium complexity with some interactive features, and uses Tailwind CSS for styling, including dark mode support with the dark: prefix.
HTML Code
<footer class="bg-gray-900 text-white dark:bg-gray-900">
<div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div class="mb-8 flex justify-center">
<a class="text-teal-400 dark:text-teal-300" href="/">
<span class="sr-only">Home</span>
<span class="text-2xl font-bold">YourPortfolio</span>
</a>
</div>
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div>
<p class="text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
Showcasing innovative projects and creative solutions.
</p>
<p class="mt-4 text-center text-base text-gray-400 dark:text-gray-500 lg:text-left">
© 2024 YourPortfolio. All rights reserved.
</p>
</div>
<div class="col-span-2">
<div class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 lg:grid-cols-3">
<div>
<p class="font-medium text-white dark:text-gray-200">Services</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Web Development</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">UI/UX Design</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Digital Marketing</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Company</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">About Us</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Careers</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Blog</a>
</nav>
</div>
<div>
<p class="font-medium text-white dark:text-gray-200">Contact</p>
<nav class="mt-4 flex flex-col space-y-2">
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Get in Touch</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">Support</a>
<a class="text-gray-400 transition hover:text-teal-400 dark:text-gray-500 dark:hover:text-teal-300" href="#">FAQ</a>
</nav>
</div>
</div>
</div>
</div>
<div class="mt-16 border-t border-gray-800 pt-8 sm:items-center sm:justify-between sm:flex">
<p class="text-center text-xs text-gray-500 dark:text-gray-600 sm:text-left">
Designed and developed with ❤️
</p>
<ul class="mt-4 flex justify-center gap-6 sm:mt-0 lg:justify-end">
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Facebook</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a class="text-gray-500 transition hover:text-teal-400 dark:text-gray-600 dark:hover:text-teal-300" href="#" target="_blank" rel="noreferrer">
<span class="sr-only">Dribbble</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>Related Components
Footer Navigation Component - Industrial Ocean
A complex, responsive footer navigation component in an industrial style with ocean/blue color scheme, suitable for event/conference websites. Includes multi-column links, social media icons, copyright, and dark mode support.
Footer Navigation Component
Footer Navigation Component with Neumorphism design, Monochromatic color scheme, Complex complexity, and Social Media purpose. Responsive design with dark theme support.
Retro_Earth_Tone_Portfolio_Footer
A responsive, retro-themed footer navigation component for a portfolio website, featuring earth tones and dark mode support. Designed with 80s/90s aesthetics in mind, offering a nostalgic feel.