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.
HTML Code
<footer class="bg-gray-100 dark:bg-gray-800 py-6">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<img src="https://picsum.photos/200/50" alt="Company Logo" class="h-10" />
</div>
<div class="flex flex-col md:flex-row space-x-4">
<a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">About Us</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Services</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Contact</a>
<a href="#" class="text-gray-800 dark:text-gray-300 hover:underline">Privacy Policy</a>
</div>
</div>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400 text-sm">© 2023 Company Name. All rights reserved.</p>
</div>
</div>
</footer>Related Components
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 simple footer navigation component designed in Glassmorphism style with a monochromatic color scheme. It is responsive, supports dark mode, and is suitable for e-commerce websites.
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.