Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina reattivo e complesso in stile neumorfismo per siti Web aziendali che utilizza una combinazione di colori in scala di grigi con supporto della modalità scura. Niente JavaScript.
Codice HTML
<footer class="bg-gray-200 dark:bg-gray-800 py-10 px-5 neumorphism-light dark:neumorphism-dark">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">About Us</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Careers</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Press</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Products</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Features</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Pricing</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Integrations</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Documentation</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Support</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">Guides</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">API Reference</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">123 Corporate Ave, Suite 456<br>Business City, BC 78901</p>
<p class="text-gray-600 dark:text-gray-400 mb-2">Email: [email protected]</p>
<p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
</div>
</div>
<div class="mt-10 border-t border-gray-300 dark:border-gray-700 pt-8 text-center text-gray-600 dark:text-gray-400">
<p>© 2023 Your Company. All rights reserved.</p>
</div>
</footer>
<style>
.neumorphism-light {
box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.neumorphism-dark {
box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 1a1a1a;
}
</style>Componenti correlati
Componente di navigazione del piè di pagina
Un componente di navigazione a piè di pagina progettato in uno stile retrò/vintage ispirato all'estetica degli anni '80 e '90. È dotato di un supporto per il tema scuro ed è completamente reattivo.
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.
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.