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.
HTML Code
<footer class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 text-white py-8 px-4 transform perspective-1000 rotateX-6 translateZ-10 hover:rotateX-0 hover:translateZ-0 transition-all duration-500">
<div class="container mx-auto flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
<h3 class="text-xl font-bold mb-2">My Blog</h3>
<p>© 2023 My Blog. All rights reserved.</p>
</div>
<div class="w-full md:w-1/3 text-center mb-4 md:mb-0">
<h3 class="text-xl font-bold mb-2">Quick Links</h3>
<ul>
<li><a href="#" class="hover:underline">Home</a></li>
<li><a href="#" class="hover:underline">Blog</a></li>
<li><a href="#" class="hover:underline">About</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 text-center md:text-right">
<h3 class="text-xl font-bold mb-2">Follow Me</h3>
<div class="flex justify-center md:justify-end space-x-4">
<a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>Composants associés
Composant de pied de page
Un composant de pied de page de style Brutalism avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de pied de page
Un composant de pied de page rétro/vintage réactif pour un blog avec une palette de couleurs triadique et une prise en charge du thème sombre.
Neumorphisme Terre Footer
Composant de pied de page réactif avec prise en charge du neumorphisme, des tons de terre et du thème sombre