Компоненты Нижний колонтитул 3D аналог простого нижнего колонтитула блога

3D аналог простого нижнего колонтитула блога

Адаптивный компонент нижнего колонтитула с поддержкой темной темы с использованием Tailwind CSS. Футер имеет простой 3D-дизайн с аналогичными цветами. Он оптимизирован для блогов/контентных сайтов.

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

HTML-код

<footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
  <div class="container mx-auto 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">
      <h3 class="text-xl font-bold mb-2">My Blog</h3>
      <p>&copy; 2023 My Blog. All rights reserved.</p>
    </div>
    <div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
      <h3 class="text-xl font-bold mb-2">Quick Links</h3>
      <ul>
        <li><a href="#" class="hover:underline">Home</a></li>
        <li><a href="#" class="hover:underline">Blog</a></li>
        <li><a href="#" class="hover:underline">About</a></li>
        <li><a href="#" class="hover:underline">Contact</a></li>
      </ul>
    </div>
    <div class="w-full md:w-1/3 text-center md:text-right">
      <h3 class="text-xl font-bold mb-2">Follow Me</h3>
      <div class="flex justify-center md:justify-end space-x-4">
        <a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
      </div>
    </div>
  </div>
</footer>

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

Нижний колонтитул стекломорфизма

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

Открытый

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

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

Открытый

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

Адаптивный компонент нижнего колонтитула для интерфейсов социальных сетей, разработанный с использованием принципов Material Design с использованием монохроматической синей цветовой схемы. Он включает в себя макеты на основе сетки, эффекты глубины (тени), анимацию наведения и перехода для интерактивных элементов, форму подписки на новостную рассылку, социальные значки, аватары пользователей и поддержку темного режима с помощью модификатора dark: от Tailwind.

Открытый