Glassmorphism Footer
Un composant de pied de page réactif conçu avec le style glassmorphism, avec des effets de verre givré et la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
<div class="mb-4 md:mb-0">
<h3 class="text-xl font-semibold">Your Company</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
<p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
</div>
</div>
<div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
<div class="mb-4 md:mb-0">
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</div>
</footer>Composants associés
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.
Pied de page vibrant neumorphe
Un composant de pied de page simple et réactif conçu avec des principes de conception neumorphiques et des couleurs vives. Il présente un aspect doux et extrudé avec des ombres subtiles tout en conservant des couleurs d’accent à haute saturation. Le pied de page comprend des sections de base pour la navigation sur le site, les liens sociaux et les informations sur les droits d’auteur avec une prise en charge complète du mode sombre.
Composant de pied de page de neumorphisme
Composant de pied de page de neumorphisme réactif avec prise en charge du thème sombre