Componenti Piè di pagina Componente piè di pagina

Componente piè di pagina

Componente piè di pagina reattivo con stile Skeuomorphism, combinazione di colori dei toni della Terra e supporto per temi scuri, progettato per i social media.

Anteprima

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

Componenti correlati

Luxury_Premium_Crypto_Footer

Un componente a piè di pagina elegante e reattivo per applicazioni di criptovaluta/blockchain, con un numero limitato di link, copyright e icone dei social media. Utilizza una combinazione di colori blu aziendale con supporto per la modalità scura.

Aperto

Componente piè di pagina

Un semplice componente del piè di pagina reattivo progettato in uno stile retrò/vintage con un supporto per il tema scuro, utilizzando Tailwind CSS. Presenta un layout di base adatto a siti Web aziendali/aziendali.

Aperto

Componente piè di pagina dei social media

Un componente piè di pagina reattivo per le interfacce di social networking, progettato con i principi del Material Design utilizzando una combinazione di colori blu monocromatica. Presenta layout basati su griglia, effetti di profondità (ombre), animazioni al passaggio del mouse e di transizione per elementi interattivi, un modulo di iscrizione alla newsletter, icone social, avatar utente e supporto per la modalità oscura tramite il modificatore dark: di Tailwind.

Aperto