Компонент навигации по нижнему колонтитулу
Простой компонент навигации по нижнему колонтитулу, выполненный в стиле Glassmorphism с монохроматической цветовой гаммой. Он адаптивный, поддерживает темный режим и подходит для сайтов электронной коммерции.
HTML-код
<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>
Связанные компоненты
Компонент навигации по нижнему колонтитулу
Простой, отзывчивый компонент навигации по нижнему колонтитулу с теплой цветовой гаммой, вдохновленной закатом, разработанный для модных и косметических брендов. Имеет тонкие эффекты наведения и поддержку темных режимов.
Skeuomorphic_Grayscale_Business_Footer
Отзывчивый, скевморфный компонент навигации по нижнему колонтитулу в оттенках серого для бизнес/корпоративных веб-сайтов, поддерживающий темный режим.
Навигация по нижнему колонтитулу Glassmorphism
Компонент навигации по нижнему колонтитулу со стилем Glassmorphism, яркой цветовой схемой и сложной версткой для приборной панели. Адаптивный дизайн с поддержкой темного режима с использованием Tailwind CSS.