Composant de pied de page
Un composant de pied de page neumorphique pour un site Web de blog/contenu, schéma de couleurs monochromatique, avec prise en charge du mode sombre. Il s’agit d’un composant modérément complexe. Il est réactif.
HTML Code
<footer class="dark:bg-gray-800 bg-gray-200 text-gray-700 dark:text-gray-300 py-10 px-4 md:px-8 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="col-span-1">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">About Us</h3>
<p class="text-sm leading-relaxed">We are a passionate team dedicated to delivering high-quality content and insights on various topics. Stay tuned for more!</p>
</div>
<div class="col-span-1">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Quick Links</h3>
<ul class="text-sm space-y-2">
<li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Home</a></li>
<li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Blog</a></li>
<li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About</a></li>
<li><a href="#" class="hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact</a></li>
</ul>
</div>
<div class="col-span-1">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-200">Subscribe</h3>
<p class="text-sm mb-4">Get the latest articles and updates directly in your inbox.</p>
<div class="flex">
<input type="email" placeholder="Your email" class="w-full px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<button class="bg-gray-400 dark:bg-gray-600 text-white px-4 py-2 rounded-r-md hover:bg-gray-500 dark:hover:bg-gray-700 transition-colors duration-200 shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark">Subscribe</button>
</div>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-700 mt-8 pt-8 text-center text-sm">
© 2023 Your Blog Name. All rights reserved.
</div>
</footer>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #222222;
}
.shadow-inner-neumorphic-light {
box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #222222;
}
.shadow-neumorphic-btn-light {
box-shadow: 3px 3px 6px #b0b0b0, -3px -3px 6px #ffffff;
}
.dark .shadow-neumorphic-btn-dark {
box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #222222;
}
</style>Composants associés
Pied de page SaaS de luxe
Un composant de pied de page élégant et sophistiqué pour une application SaaS, comprenant plusieurs sections de navigation, une inscription à la newsletter, des liens vers les réseaux sociaux et des informations sur les droits d’auteur. Conçu avec une palette de couleurs océan/bleu, une réactivité totale et une prise en charge du mode sombre.
Composant de pied de page skeuomorphe
Composant de pied de page réactif avec un design skeuomorphe, une palette de couleurs analogue (verts, bleus-verts) et une complexité modérée adaptée aux sites Web d’entreprise. Comprend des liens, un espace réservé pour le logo et un effet Skeuomorphic subtil obtenu avec des ombres et des dégradés. Prend en charge les modes clair et sombre.
Composant de pied de page de médias sociaux
Un composant de pied de page réactif pour les interfaces de réseaux sociaux, conçu selon les principes de Material Design à l’aide d’un schéma de couleurs bleu monochrome. Il propose des mises en page basées sur une grille, des effets de profondeur (ombres), des animations de survol et de transition pour les éléments interactifs, un formulaire d’inscription à la newsletter, des icônes sociales, des avatars d’utilisateurs et la prise en charge du mode sombre via le modificateur dark : de Tailwind.