Componente di navigazione a piè di pagina 38
Un componente di navigazione a piè di pagina reattivo progettato con uno stile scheumorfico per imitare gli elementi del mondo reale, con supporto per il tema scuro e utilizzando Tailwind CSS. Questo componente include link, immagini segnaposto e avatar.
Codice HTML
<footer class="bg-gray-800 text-white p-6 mt-8">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col items-center md:items-start">
<h2 class="text-lg font-bold mb-2">Stay Connected</h2>
<p class="text-sm">Follow us on our social channels!</p>
<div class="flex space-x-4 mt-2">
<a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
<a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
<a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
</div>
</div>
<div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
<h2 class="text-lg font-bold mb-2">About Us</h2>
<ul class="text-sm space-y-1">
<li><a href="#" class="hover:underline">Our Story</a></li>
<li><a href="#" class="hover:underline">Career</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</div>
<div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
<h2 class="text-lg font-bold mb-2">User Profiles</h2>
<div class="flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
</div>
</div>
</div>
<div class="mt-6 text-center text-sm">
<p>© 2023 Your Company. All Rights Reserved.</p>
<p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
</div>
</footer>
<style>
@media (prefers-color-scheme: dark) {
footer {
background-color: #1f1f1f;
}
footer a {
color: #white;
}
footer a:hover {
color: #cbd5e1;
}
}
</style>Componenti correlati
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo con uno stile di design retrò/vintage, che utilizza colori vivaci e su misura per le interfacce dei social media.
Componente di navigazione del piè di pagina
Un semplice componente di navigazione a piè di pagina progettato in stile brutalista con una combinazione di colori triadica per le interfacce dei social media. Include collegamenti e immagini avatar, con supporto per la modalità oscura.
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo con uno stile glassmorphism con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura. Supporta la modalità oscura e include immagini segnaposto.