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

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

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

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

HTML-код

<footer class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 SocialApp. All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/3 flex justify-center mb-4 md:mb-0">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3 flex justify-center md:justify-end">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

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

Роскошный подвал SaaS

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

Открытый

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

Простой адаптивный компонент футера, выполненный в ретро/винтажном стиле с поддержкой темной темы, с использованием Tailwind CSS. Он имеет базовый макет, подходящий для деловых/корпоративных сайтов.

Открытый

Glassmorphism_Footer_Component

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

Открытый