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

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

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

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

HTML-код

<footer class="bg-gray-800 text-gray-200 py-6">
    <div class="container mx-auto flex justify-between items-center flex-wrap">
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Company Info</h4>
            <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Quick Links</h4>
            <ul>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Home</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">About Us</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Services</a></li>
                <li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Contact</a></li>
            </ul>
        </div>
        <div class="flex flex-col w-full md:w-1/3 mb-4">
            <h4 class="font-bold text-lg">Contact Us</h4>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <div class="text-sm">
                    <p>John Doe</p>
                    <p>[email protected]</p>
                </div>
            </div>
            <p class="text-sm">Reach out to us for any inquiries.</p>
        </div>
    </div>
    <div class="bg-gray-700 text-center py-4 mt-4">
        <p class="text-sm">&copy; 2023 Company Name. All rights reserved.</p>
    </div>
</footer>

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

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

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

Открытый

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

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

Открытый

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

Компонент навигации по нижнему колонтитулу со стилем Glassmorphism, яркой цветовой схемой и сложной версткой для приборной панели. Адаптивный дизайн с поддержкой темного режима с использованием Tailwind CSS.

Открытый