Componente di navigazione del piè di pagina
Componente di navigazione a piè di pagina con design del neumorfismo, combinazione di colori monocromatici, complessità complessa e scopo dei social media. Design reattivo con supporto per temi scuri.
Codice HTML
<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-600 dark:text-gray-300">
© 2023 Your Company. All rights reserved.
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-card {
background: #333333;
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>
</footer>Componenti correlati
Componente di navigazione del piè di pagina
Un semplice componente di navigazione a piè di pagina progettato in stile Glassmorphism con una combinazione di colori monocromatica. È reattivo, supporta la modalità oscura ed è adatto per i siti di e-commerce.
Componente di navigazione del piè di pagina
Un semplice componente di navigazione a piè di pagina con i principi di Material Design e una combinazione di colori analoga per siti Web aziendali/aziendali. Supporta la modalità oscura ed è reattivo.
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo per dashboard con supporto per temi scuri, con microinterazioni sui passaggi del mouse sui collegamenti utilizzando colori triadici ed elementi complessi. Niente JavaScript, solo HTML con Tailwind CSS.