Components Footer Navigation Footer Navigation Component

Footer Navigation Component

A responsive Footer Navigation component designed with a skeuomorphic style, featuring interactive elements suitable for e-commerce. It follows a triadic color scheme and supports dark mode.

Preview

HTML Code

<footer class="bg-gray-100 dark:bg-gray-900 p-4 shadow-lg rounded-lg">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center mb-4 md:mb-0">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-2">
            <h2 class="text-xl font-semibold dark:text-white">Shop Logo</h2>
        </div>
        <nav class="flex flex-col md:flex-row text-gray-600 dark:text-gray-300">
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Products</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">About Us</a>
            <a href="#" class="mx-2 transition-colors duration-300 hover:text-blue-500 dark:hover:text-blue-400">Contact</a>
        </nav>
    </div>
    <div class="mt-4 text-center text-gray-600 dark:text-gray-300">
        <p>&copy; 2023 E-Commerce. All rights reserved.</p>
    </div>
</footer>

Related Components

3D Design Footer Navigation Component

A 3D-styled footer navigation component with responsive design and dark mode support.

Open

Glassmorphism Footer Navigation

Footer navigation component with Glassmorphism style, vibrant color scheme, and complex layout for dashboard purposes. Responsive design with dark mode support using Tailwind CSS.

Open

Footer Navigation Component

Footer Navigation Component for E-commerce with Material Design - a simple component with responsive and dark mode support, featuring a complementary color scheme.

Open