Piè di pagina del blog semplice analogo 3D
Componente piè di pagina reattivo con supporto per temi scuri utilizzando Tailwind CSS. Il piè di pagina ha un semplice design 3D con colori analoghi. È ottimizzato per blog/siti Web di contenuti.
Codice HTML
<footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
<div class="container mx-auto flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
<h3 class="text-xl font-bold mb-2">My Blog</h3>
<p>© 2023 My Blog. All rights reserved.</p>
</div>
<div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
<h3 class="text-xl font-bold mb-2">Quick Links</h3>
<ul>
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">Blog</a></li>
<li><a href="#" class="hover:underline">About</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 text-center md:text-right">
<h3 class="text-xl font-bold mb-2">Follow Me</h3>
<div class="flex justify-center md:justify-end space-x-4">
<a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>Componenti correlati
Componente piè di pagina
Un componente Piè di pagina progettato in uno stile scheumorfico con una combinazione di colori triadica e complessità moderata, adatto per un layout Blog/Contenuto.
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.
Piè di pagina Componente Piè di pagina
Un semplice componente del piè di pagina con un sottile design di scheumorfismo, che utilizza una combinazione di colori analoga. Include un avviso di copyright, alcuni link di navigazione e icone dei social media. Il design è reattivo e supporta la modalità oscura.