Componentes Pie de página Fundido de entrada del pie de página 3D

Fundido de entrada del pie de página 3D

Pie de página responsivo con elementos de diseño 3D y compatibilidad con el modo oscuro

Vista previa

Código HTML

<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>

Componentes relacionados

Pie de página minimalista para redes sociales

Un componente de pie de página minimalista con una combinación de colores en tonos tierra para interfaces de redes sociales. Responsivo con soporte para temas oscuros.

Abrir

Componente de pie de página

Un componente de pie de página responsivo simple diseñado en un estilo retro / vintage con soporte para temas oscuros, usando Tailwind CSS. Cuenta con un diseño básico adecuado para sitios web comerciales / corporativos.

Abrir

Neumorfismo Earth Footer

Componente de pie de página responsivo con neumorfismo, tonos de tierra y compatibilidad con temas oscuros

Abrir