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 skeuomórfico

Componente de pie de página responsivo con diseño esqueuomórfico, esquema de color análogo (verdes, azul-verdes) y complejidad moderada adecuado para sitios web comerciales. Incluye enlaces, un marcador de posición de logotipo y un sutil efecto Skeuomorphic logrado con sombras y degradados. Soporta modos claro y oscuro.

Abrir

Componente de pie de página

Un componente de pie de página de estilo brutalismo con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Abrir

Pie de página Componente Pie de página

Un componente de pie de página simple con un sutil diseño de Skeuomorphism, que utiliza un esquema de color análogo. Incluye un aviso de derechos de autor, algunos enlaces de navegación e iconos de redes sociales. El diseño es responsivo y admite el modo oscuro.

Abrir