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
Il s’agit d’un composant de navigation de pied de page simple conçu selon les principes de conception matérielle et une palette de couleurs analogue pour les sites Web d’entreprise. Il prend en charge le mode sombre et est réactif.
Composant de navigation en pied de page
Un composant de navigation de pied de page réactif conçu pour un tableau de bord, avec un style Skeuomorphic avec des couleurs vives. Il comprend des liens de navigation, un logo et des icônes de médias sociaux, avec une prise en charge complète du mode sombre à l’aide de Tailwind CSS. La conception vise une complexité modérée avec des effets de vol stationnaire interactifs.
Composant de navigation en pied de page
Un composant de navigation en pied de page conçu dans un style rétro/vintage inspiré de l’esthétique des années 80 et 90. Il dispose d’un support de thème sombre et est entièrement réactif.