Componente de navegación de pie de página
Componente de navegación de pie de página con modo oscuro y efectos responsivos
Código HTML
<footer class="bg-gray-900 text-gray-300 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/4 mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-white mb-2">Company</h3>
<ul>
<li><a href="#" class="hover:text-white">About Us</a></li>
<li><a href="#" class="hover:text-white">Careers</a></li>
<li><a href="#" class="hover:text-white">Press</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-white mb-2">Products</h3>
<ul>
<li><a href="#" class="hover:text-white">Features</a></li>
<li><a href="#" class="hover:text-white">Pricing</a></li>
<li><a href="#" class="hover:text-white">Integrations</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-4 md:mb-0">
<h3 class="text-lg font-semibold text-white mb-2">Support</h3>
<ul>
<li><a href="#" class="hover:text-white">Help Center</a></li>
<li><a href="#" class="hover:text-white">API Status</a></li>
<li><a href="#" class="hover:text-white">Contact Us</a></li>
</ul>
</div>
<div class="w-full md:w-1/4">
<h3 class="text-lg font-semibold text-white mb-2">Legal</h3>
<ul>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="mt-8 border-t border-gray-700 pt-4 flex flex-col md:flex-row items-center justify-between">
<p>© 2023 Your Company. All rights reserved.</p>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="hover:text-white"><i class="fab fa-facebook"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</footer>Componentes relacionados
Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo para paneles con soporte de temas oscuros, con microinteracciones en los desplazamientos de enlaces con colores triádicos y elementos complejos. Sin JavaScript, solo HTML con Tailwind CSS.
Componente de navegación de pie de página
Un componente de navegación a pie de página diseñado en un estilo retro/vintage inspirado en la estética de los años 80 y 90. Cuenta con un soporte de tema oscuro y es totalmente responsivo.
Componente de navegación de pie de página
Componente de navegación de pie de página con diseño de neumorfismo, combinación de colores monocromática, complejidad compleja y propósito de redes sociales. Diseño responsivo con soporte para temas oscuros.