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.
Codice HTML
<footer class="bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 shadow-inner pt-16 pb-8 transition-colors duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<!-- Brand & Description -->
<div>
<img class="h-8 mb-4 rounded shadow-md" src="https://picsum.photos/100/40?grayscale" alt="SocialNet Logo" />
<h2 class="text-lg font-semibold mb-2">About SocialNet</h2>
<p class="text-sm leading-relaxed">Connect with friends, share your moments, and explore what's happening around you.</p>
</div>
<!-- Useful Links -->
<div class="grid grid-cols-2 gap-8">
<div>
<h3 class="text-sm font-semibold mb-3">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Features</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Integrations</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Privacy</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold mb-3">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">About Us</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Careers</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Contact</a></li>
</ul>
</div>
</div>
<!-- Subscription & Social Icons -->
<div>
<h3 class="text-sm font-semibold mb-4">Stay Connected</h3>
<form class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-2">
<input type="email" placeholder="Your email" class="flex-grow px-3 py-2 bg-blue-100 dark:bg-blue-800 border border-blue-200 dark:border-blue-700 text-sm placeholder-blue-400 dark:placeholder-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition-colors duration-200" />
<button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow hover:shadow-lg transition-all duration-200">Subscribe</button>
</form>
<div class="mt-6 flex space-x-4">
<a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<!-- Facebook Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.407.593 24 1.324 24H12V14.709h-3.292v-3.63H12V8.271c0-3.265 1.993-5.043 4.897-5.043 1.392 0 2.586.104 2.934.15v3.403l-2.015.001c-1.58 0-1.885.752-1.885 1.85v2.426h3.77l-.492 3.63h-3.278V24h6.422c.73 0 1.324-.593 1.324-1.324V1.324C24 .593 23.407 0 22.676 0z"/></svg>
</a>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<!-- Twitter Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557a9.93 9.93 0 0 1-2.827.775 4.93 4.93 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.384 4.482A13.94 13.94 0 0 1 1.671 3.149 4.916 4.916 0 0 0 3.194 9.723 4.9 4.9 0 0 1 .964 9.1v.062a4.917 4.917 0 0 0 3.941 4.817 4.913 4.913 0 0 1-2.212.084 4.919 4.919 0 0 0 4.594 3.417A9.868 9.868 0 0 1 .48 19.292 13.94 13.94 0 0 0 7.548 21c9.356 0 14.407-7.721 13.995-14.646A10.025 10.025 0 0 0 24 4.557z"/></svg>
</a>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<!-- Instagram Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 2.052.248 2.528.415a5.003 5.003 0 0 1 1.845 1.17 5.006 5.006 0 0 1 1.17 1.845c.167.476.359 1.322.415 2.528.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.248 2.052-.415 2.528a5.002 5.002 0 0 1-1.17 1.845 5.004 5.004 0 0 1-1.845 1.17c-.476.167-1.322.359-2.528.415-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-2.052-.248-2.528-.415a4.993 4.993 0 0 1-1.845-1.17 4.994 4.994 0 0 1-1.17-1.845c-.167-.476-.359-1.322-.415-2.528C2.175 15.747 2.163 15.367 2.163 12s.012-3.584.07-4.85c.056-1.206.248-2.052.415-2.528a5.005 5.005 0 0 1 1.17-1.845 5.005 5.005 0 0 1 1.845-1.17c.476-.167 1.322-.359 2.528-.415C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.775.131 4.836.343 4.1.626a7.005 7.005 0 0 0-2.541 1.636A7.005 7.005 0 0 0 .626 4.1C.343 4.836.131 5.775.072 7.052.013 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.277.271 2.216.554 2.952a7.002 7.002 0 0 0 1.636 2.541 7.003 7.003 0 0 0 2.541 1.636c.736.283 1.675.495 2.952.554C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.277-.059 2.216-.271 2.952-.554a7.006 7.006 0 0 0 2.541-1.636 7.004 7.004 0 0 0 1.636-2.541c.283-.736.495-1.675.554-2.952.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.277-.271-2.216-.554-2.952a7.003 7.003 0 0 0-1.636-2.541A7.005 7.005 0 0 0 19.9.626c-.736-.283-1.675-.495-2.952-.554C15.668.013 15.259 0 12 0z"/><path d="M12 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-10.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
</a>
</div>
</div>
</div>
<div class="mt-12 flex flex-col md:flex-row items-center justify-between border-t border-blue-200 dark:border-blue-700 pt-6">
<p class="text-xs">© 2023 SocialNet. All rights reserved.</p>
<div class="flex -space-x-2 mt-4 md:mt-0">
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" />
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/35.jpg" alt="User avatar" />
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar" />
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User avatar" />
</div>
</div>
</div>
</footer>Componenti correlati
Piè di pagina monocromatico Glassmorphism
Un semplice componente monocromatico del piè di pagina glassmorphism per un blog, con design reattivo e supporto per la modalità scura.
Neumorfismo Earth Footer
Componente piè di pagina reattivo con supporto per neumorfismo, toni della terra e tema scuro
Piè di pagina per prenotazioni aziendali
Un componente a piè di pagina aziendale complesso e reattivo progettato per i sistemi di prenotazione, con neutri caldi e supporto per la modalità scura, utilizzando HTML semantico e Tailwind CSS.