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.
HTML Code
<footer class="bg-gray-800 dark:bg-gray-900 text-white py-4">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col md:flex-row items-center">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2 md:mb-0 md:mr-4">
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a></li>
<li><a href="#" class="hover:text-red-400 dark:hover:text-red-300">About</a></li>
<li><a href="#" class="hover:text-green-400 dark:hover:text-green-300">Contact</a></li>
</ul>
</div>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Facebook</a>
<a href="#" class="hover:text-red-400 dark:hover:text-red-300">Twitter</a>
<a href="#" class="hover:text-green-400 dark:hover:text-green-300">Instagram</a>
</div>
</div>
</footer>Related Components
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.
Footer Navigation Component
A responsive and complex Neumorphism-styled Footer Navigation Component for corporate websites using a grayscale color scheme with dark mode support. No JavaScript.
Footer Navigation Component
A responsive footer navigation component designed for a dashboard, featuring a Skeuomorphic style with vibrant colors. It includes navigation links, a logo, and social media icons, with full dark mode support using Tailwind CSS. The design aims for a moderate complexity with interactive hover effects.