Компоненты Навигация по нижнему колонтитулу Компонент навигации по нижнему колонтитулу

Компонент навигации по нижнему колонтитулу

Отзывчивый компонент навигации в нижнем колонтитуле со стилем стекломорфизма с полупрозрачными элементами, похожими на матовое стекло, и эффектами размытия. Он поддерживает темный режим и включает в себя изображения-заполнители.

Предварительный просмотр

HTML-код

<footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
                <span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
            </div>
            <nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
            </nav>
        </div>
        <div class="mt-6 text-center">
            <p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

Связанные компоненты

Компонент навигации по нижнему колонтитулу

Адаптивный компонент навигации по нижнему колонтитулу, разработанный для приборной панели, выполнен в скевоморфном стиле с яркими цветами. Он включает в себя навигационные ссылки, логотип и значки социальных сетей, а также полную поддержку темного режима с использованием Tailwind CSS. Дизайн нацелен на умеренную сложность с интерактивными эффектами наведения.

Открытый

Компонент навигации в футере - Промышленный океан

Сложный, отзывчивый компонент навигации по нижнему колонтитулу в индустриальном стиле с океанской/синей цветовой гаммой, подходящий для веб-сайтов мероприятий/конференций. Включает ссылки на несколько столбцов, значки социальных сетей, авторские права и поддержку темного режима.

Открытый

Минималистичная навигация по нижнему колонтитулу

Минималистичный компонент навигации по нижнему колонтитулу для блогов с адаптивным дизайном и поддержкой темного режима.

Открытый