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.
HTML Code
<footer class="bg-white bg-opacity-40 backdrop-blur-lg p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-50">
<div class="container mx-auto flex flex-col sm:flex-row justify-between items-center">
<div class="text-center sm:text-left">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Shop with Us</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Your online shopping experience starts here.</p>
</div>
<div class="mt-4 sm:mt-0">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Products</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">About Us</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-blue-500">Contact</a></li>
</ul>
</div>
</div>
<div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
<p>© 2023 Your E-commerce. All rights reserved.</p>
</div>
</footer>Related Components
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.
Minimalist Footer Navigation
A minimalist footer navigation component for blogs with responsive design and dark mode support.
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.