Footer Navigation Component
A responsive footer navigation component for dashboards with dark theme support, featuring microinteractions on link hovers using triadic colors and complex elements. No JavaScript, only HTML with Tailwind CSS.
HTML Code
<footer class="bg-blue-100 dark:bg-blue-900">
<div class="container mx-auto px-6 py-8">
<div class="flex flex-col items-center text-center">
<div class="flex flex-wrap justify-center -mx-4">
<a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">About</a>
<a href="#" class="mx-4 text-sm text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110">Blog</a>
<a href="#" class="mx-4 text-sm text-yellow-800 dark:text-yellow-200 hover:text-yellow-600 dark:hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110">Careers</a>
<a href="#" class="mx-4 text-sm text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-110">Contact Us</a>
</div>
<p class="mt-4 text-sm text-blue-800 dark:text-blue-200">© 2023 Dashboard Inc. All rights reserved.</p>
</div>
</div>
</footer>Related Components
Footer Navigation Component
A simple footer navigation component designed in a Brutalist style with a triadic color scheme for social media interfaces. It includes links and avatar images, with dark mode support.
Footer Navigation Component 38
A responsive footer navigation component designed with skeuomorphic style to mimic real-world elements, featuring dark theme support and using Tailwind CSS. This component includes links, placeholder images, and avatars.
Footer Navigation Component
A responsive footer navigation component with a glassmorphism style featuring frosted glass-like translucent elements and blur effects. It supports dark mode and includes placeholder images.