Composant de navigation en pied de page
Un composant de navigation de pied de page réactif et complexe de style Neumorphisme pour les sites Web d’entreprise utilisant un schéma de couleurs en niveaux de gris avec prise en charge du mode sombre. Pas de JavaScript.
HTML Code
<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>Composants associés
Composant de navigation en pied de page 38
Un composant de navigation de pied de page réactif conçu avec un style skeuomorphique pour imiter les éléments du monde réel, avec la prise en charge du thème sombre et l’utilisation de Tailwind CSS. Ce composant comprend des liens, des images d’espace réservé et des avatars.
Composant de navigation en pied de page
Composant de navigation de pied de page pour le commerce électronique avec Material Design - un composant simple avec prise en charge du mode réactif et sombre, avec une palette de couleurs complémentaire.
Brutalist_Pastel_News_Footer
Il s’agit d’un composant complexe de navigation de pied de page de style brutaliste pour les sites d’actualités et de journalisme, avec des couleurs pastel, un contraste élevé et des mises en page inhabituelles. Il est entièrement réactif et prend en charge le mode sombre.