Composants Pied de page Fondu de pied de page 3D

Fondu de pied de page 3D

Pied de page réactif avec éléments de conception 3D et prise en charge du mode sombre

Aperçu

HTML Code

<footer class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-10">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h3 class="text-xl font-bold mb-3">3D Footer</h3>
        <p class="text-sm">Explore the depths of our amazing footer. Designed with a touch of 3D for an immersive experience.</p>
      </div>
      <div class="w-full md:w-1/3 mb-6 md:mb-0">
        <h4 class="text-lg font-semibold mb-3">Quick Links</h4>
        <ul class="space-y-2">
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
          <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3">
        <h4 class="text-lg font-semibold mb-3">Contact Us</h4>
        <p class="text-sm">Email: [email protected]</p>
        <p class="text-sm">Phone: +1 234 567 890</p>
        <div class="flex mt-4 space-x-4">
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">
            <i class="fab fa-instagram"></i>
          </a>
        </div>
      </div>
    </div>
    <div class="mt-8 text-center text-sm">
      <p>&copy; 2023 3D Footer. All rights reserved.</p>
    </div>
  </div>
</footer>

Composants associés

Glassmorphism Footer

Un composant de pied de page réactif conçu avec le style glassmorphism, avec des effets de verre givré et la prise en charge des thèmes sombres à l’aide de Tailwind CSS.

Ouvrir

Composant de pied de page

Un composant simple de pied de page en mode sombre pour les médias sociaux avec une palette de couleurs complémentaire.

Ouvrir

Composant de pied de page Glassmorphism

Il s’agit d’un composant de pied de page réactif avec un style glassmorphism, avec des éléments translucides semblables à du verre dépoli avec des effets de flou, et prend en charge un thème sombre.

Ouvrir