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.
HTML Code
<footer class="bg-gray-800 text-white p-10 flex flex-col items-center justify-center"> <div class="flex flex-wrap justify-center"> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">Contact Us</h4> <p class="text-lg">Email: [email protected]</p> <p class="text-lg">Phone: (123) 456-7890</p> </div> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">Follow Us</h4> <div class="flex space-x-4"> <a href="#" class="text-lg hover:text-gray-400">Facebook</a> <a href="#" class="text-lg hover:text-gray-400">Twitter</a> <a href="#" class="text-lg hover:text-gray-400">Instagram</a> </div> </div> <div class="m-5"> <h4 class="text-2xl font-bold mb-2">About Us</h4> <p class="text-lg">We are a company that values...</p> </div> </div> <div class="flex flex-wrap justify-center mt-10"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar 2"> <img class="rounded-full h-16 w-16 m-2" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Avatar 3"> </div> <div class="mt-10 text-center"> <p class="text-sm">© 2023 Example Company. All Rights Reserved.</p> </div> <style> @media (prefers-color-scheme: dark) { .bg-gray-800 { background-color: #1a1a1a; } .text-white { color: #f0f0f0; } .hover\:text-gray-400:hover { color: #a0a0a0; } } </style> </footer>Composants associés
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.
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.
Composant de pied de page skeuomorphe
Composant de pied de page réactif avec un design skeuomorphe, une palette de couleurs analogue (verts, bleus-verts) et une complexité modérée adaptée aux sites Web d’entreprise. Comprend des liens, un espace réservé pour le logo et un effet Skeuomorphic subtil obtenu avec des ombres et des dégradés. Prend en charge les modes clair et sombre.