Composant de navigation en pied de page
Composant de navigation en pied de page avec conception Neumorphism, palette de couleurs monochromatique, complexité complexe et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre.
HTML Code
<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>Composants associés
Industrial_Rainbow_Footer_Navigation
Un composant de navigation en pied de page simple et réactif avec une esthétique industrielle, des éléments exposés et un arrière-plan dégradé arc-en-ciel multicolore, conçu pour les interfaces finance/banque. Inclut la prise en charge du mode sombre.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif avec un thème sombre, adapté à un site web de portfolio. Il présente une palette de couleurs monochromatique avec différentes nuances d’une seule couleur, une complexité moyenne avec quelques fonctionnalités interactives, et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre avec le préfixe dark :.
Composant de navigation en pied de page
Un composant de navigation de pied de page simple conçu dans le style Glassmorphism avec une palette de couleurs monochromatique. Il est réactif, prend en charge le mode sombre et convient aux sites Web de commerce électronique.