Componentes Pie de página Componente de pie de página

Componente de pie de página

Componente de pie de página responsivo con estilo Skeuomorphism, combinación de colores de tonos tierra y soporte para temas oscuros, diseñado para redes sociales".

Vista previa

Código HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 dark:bg-gray-900">

<footer class="bg-gradient-to-b from-yellow-800 to-yellow-900 text-gray-200 py-8 dark:from-gray-800 dark:to-gray-900">
  <div class="container mx-auto px-4 flex flex-col items-center">

    <!-- Social Media Links (Skeuomorphism style) -->
    <div class="flex space-x-6 mb-6">
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Facebook
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Twitter
      </a>
      <a href="#" class="text-gray-300 hover:text-white transition duration-300 ease-in-out transform hover:scale-110
                        bg-gradient-to-br from-yellow-700 to-yellow-800 dark:from-gray-700 dark:to-gray-800
                        px-4 py-2 rounded-lg shadow-md hover:shadow-lg">
        Instagram
      </a>
    </div>

    <!-- Copyright Information -->
    <p class="text-sm text-gray-400 dark:text-gray-600">& Animations Copyright &copy; 2023 Your Company. All rights reserved.</p>

  </div>
</footer>

</body>
</html>

Componentes relacionados

Componente de pie de página

Un componente de pie de página neumórfico para un sitio web de blog/contenido, esquema de color monocromático, con soporte para modo oscuro. Es un componente moderadamente complejo. Es responsivo.

Abrir

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

Pie de página vibrante neumórfico

Un componente de pie de página simple y receptivo diseñado con principios de diseño neumórfico y colores vibrantes. Presenta una apariencia suave y extruida con sombras sutiles mientras mantiene los colores de acento de alta saturación. El pie de página incluye secciones básicas para la navegación del sitio, enlaces sociales e información de derechos de autor con soporte completo para el modo oscuro.

Abrir