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

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

Компонент Footer, выполненный в стиле Neumorphism, поддерживающий адаптивные эффекты и темные темы с использованием Tailwind CSS.

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

HTML-код

<footer class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <div class="container mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">About Us</h5>
                <p class="text-gray-600 dark:text-gray-400">We are dedicated to providing the best service to our customers.</p>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us</h5>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Facebook</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Twitter</a>
                    <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">Instagram</a>
                </div>
            </div>
            <div class="mb-4 md:mb-0">
                <h5 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Contact Us</h5>
                <p class="text-gray-600 dark:text-gray-400">Email: [email protected]</p>
            </div>
            <div class="hidden md:block">
                <img src="https://picsum.photos/50" alt="Placeholder" class="rounded-full w-10 h-10" />
            </div>
        </div>
        <div class="text-center mt-6">
            <p class="text-gray-600 dark:text-gray-400">© 2023 Company. All Rights Reserved.</p>
        </div>
    </div>
</footer>

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

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

Адаптивный компонент нижнего колонтитула со стилем glassmorphism с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия и поддержкой темной темы.

Открытый

Минималистичный футер для социальных сетей

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

Открытый

Скевоморфный компонент нижнего колонтитула

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

Открытый