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
3D analogue simple pied de blog
Composant de pied de page réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS. Le pied de page a un design 3D simple avec des couleurs analogues. Il est optimisé pour les sites de blog/contenu.
Pied de page Composant Pied de page
Un composant de pied de page simple avec un design Skeuomorphism subtil, utilisant une palette de couleurs analogue. Il comprend un avis de droit d’auteur, quelques liens de navigation et des icônes de médias sociaux. Le design est réactif et prend en charge le mode sombre.
Pied de page de blog rétro
Un composant de pied de page rétro/vintage pour un blog avec une palette de couleurs monochromatiques, une mise en page simple, un design réactif et une prise en charge du thème sombre.