Компоненты Карта сайта Компонент карты сайта

Компонент карты сайта

Компонент карты сайта с минималистичным/плоским дизайном, адаптивными эффектами и поддержкой темных тем.

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

HTML-код

<footer class='bg-white dark:bg-gray-900'>
    <div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
        <div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>About Us</a>
                    <a href='#' class='hover:opacity-75'>Careers</a>
                    <a href='#' class='hover:opacity-75'>Contact Us</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Web Development</a>
                    <a href='#' class='hover:opacity-75'>Mobile Development</a>
                    <a href='#' class='hover:opacity-75'>SEO Optimization</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Privacy Policy</a>
                    <a href='#' class='hover:opacity-75'>Terms of Service</a>
                    <a href='#' class='hover:opacity-75'>Cookie Policy</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Facebook</a>
                    <a href='#' class='hover:opacity-75'>Twitter</a>
                    <a href='#' class='hover:opacity-75'>Instagram</a>
                </nav>
            </div>
        </div>
        <div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
            <p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
                © 2024 Your Company. All rights reserved.
            </p>
        </div>
    </div>
</footer>

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

Компонент карты сайта

Адаптивный компонент карты сайта, разработанный в соответствии с принципами Material Design, с макетами на основе сетки, тенями и поддержкой темного режима.

Открытый

Компонент карты сайта социальных сетей

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

Открытый

Компонент карты сайта

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

Открытый