Piè di pagina di Glassmorphism
Un componente del piè di pagina reattivo progettato con lo stile glassmorphism, con effetti simili al vetro smerigliato e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-semibold">Your Company</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
</div>
</div>
<div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
<div class="mb-4 md:mb-0">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</div>
</footer>Componenti correlati
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.
Componente piè di pagina Glassmorphism
Un componente del piè di pagina reattivo con uno stile glassmorphism con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporta un tema scuro.
Componente piè di pagina scheumorfico
Componente piè di pagina reattivo con design scheumorfico, combinazione di colori analoga (verdi, blu-verdi) e complessità moderata adatta per siti Web aziendali. Include collegamenti, un segnaposto del logo e un sottile effetto Skeuomorphic ottenuto con ombre e sfumature. Supporta le modalità chiara e scura.