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

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

Компонент навигации по нижнему колонтитулу с темным режимом и отзывчивыми эффектами

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

HTML-код

<footer class="bg-gray-900 text-gray-300 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Company</h3>
        <ul>
          <li><a href="#" class="hover:text-white">About Us</a></li>
          <li><a href="#" class="hover:text-white">Careers</a></li>
          <li><a href="#" class="hover:text-white">Press</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Products</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Features</a></li>
          <li><a href="#" class="hover:text-white">Pricing</a></li>
          <li><a href="#" class="hover:text-white">Integrations</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4 mb-4 md:mb-0">
        <h3 class="text-lg font-semibold text-white mb-2">Support</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Help Center</a></li>
          <li><a href="#" class="hover:text-white">API Status</a></li>
          <li><a href="#" class="hover:text-white">Contact Us</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/4">
        <h3 class="text-lg font-semibold text-white mb-2">Legal</h3>
        <ul>
          <li><a href="#" class="hover:text-white">Privacy Policy</a></li>
          <li><a href="#" class="hover:text-white">Terms of Service</a></li>
        </ul>
      </div>
    </div>
    <div class="mt-8 border-t border-gray-700 pt-4 flex flex-col md:flex-row items-center justify-between">
      <p>&copy; 2023 Your Company. All rights reserved.</p>
      <div class="flex space-x-4 mt-4 md:mt-0">
        <a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

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

NeonGlowfooterНавигация

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

Открытый

Ретро/винтаж Футер электронной коммерции

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

Открытый

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

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

Открытый