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.
HTML Code
<footer class="bg-gray-800 text-white p-6 mt-8">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col items-center md:items-start">
<h2 class="text-lg font-bold mb-2">Stay Connected</h2>
<p class="text-sm">Follow us on our social channels!</p>
<div class="flex space-x-4 mt-2">
<a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
<a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
<a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
</div>
</div>
<div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
<h2 class="text-lg font-bold mb-2">About Us</h2>
<ul class="text-sm space-y-1">
<li><a href="#" class="hover:underline">Our Story</a></li>
<li><a href="#" class="hover:underline">Career</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</div>
<div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
<h2 class="text-lg font-bold mb-2">User Profiles</h2>
<div class="flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
</div>
</div>
</div>
<div class="mt-6 text-center text-sm">
<p>© 2023 Your Company. All Rights Reserved.</p>
<p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
</div>
</footer>
<style>
@media (prefers-color-scheme: dark) {
footer {
background-color: #1f1f1f;
}
footer a {
color: #white;
}
footer a:hover {
color: #cbd5e1;
}
}
</style>Composants associés
Composant de navigation en pied de page
Composant de navigation en pied de page avec mode sombre et effets réactifs
Composant de navigation en pied de page
Un composant de navigation en pied de page simple et réactif avec une palette de couleurs chaudes inspirées du coucher de soleil, conçu pour les marques de mode/beauté. Dispose d’effets de survol subtils et d’une prise en charge du mode sombre.
Navigation minimaliste dans le pied de page
Un composant de navigation en pied de page minimaliste pour les blogs avec un design réactif et une prise en charge du mode sombre.