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 designed for business/corporate websites in dark mode, featuring a triadic color scheme and medium complexity with interactive features.
Footer Navigation Component
A simple footer navigation component styled with Material Design principles and an analogous color scheme for business/corporate websites. It supports dark mode and is responsive.
Skeuomorphic_Grayscale_Business_Footer
A responsive, skeumorphic grayscale footer navigation component for business/corporate websites, supporting dark mode.