Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo diseñado para sitios web comerciales/corporativos en modo oscuro, con un esquema de color triádico y complejidad media con funciones interactivas.
Código HTML
<footer class="bg-gray-800 text-gray-200 py-6">
<div class="container mx-auto flex justify-between items-center flex-wrap">
<div class="flex flex-col w-full md:w-1/3 mb-4">
<h4 class="font-bold text-lg">Company Info</h4>
<p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.</p>
</div>
<div class="flex flex-col w-full md:w-1/3 mb-4">
<h4 class="font-bold text-lg">Quick Links</h4>
<ul>
<li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Home</a></li>
<li><a href="#" class="text-gray-400 hover:text-gray-100 transition">About Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Services</a></li>
<li><a href="#" class="text-gray-400 hover:text-gray-100 transition">Contact</a></li>
</ul>
</div>
<div class="flex flex-col w-full md:w-1/3 mb-4">
<h4 class="font-bold text-lg">Contact Us</h4>
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-sm">
<p>John Doe</p>
<p>[email protected]</p>
</div>
</div>
<p class="text-sm">Reach out to us for any inquiries.</p>
</div>
</div>
<div class="bg-gray-700 text-center py-4 mt-4">
<p class="text-sm">© 2023 Company Name. All rights reserved.</p>
</div>
</footer>Componentes relacionados
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.
Componente de navegación de pie de página 38
Un componente de navegación de pie de página responsivo diseñado con un estilo skeuomórfico para imitar elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS. Este componente incluye enlaces, imágenes de marcador de posición y avatares.
Componente de navegación de pie de página
Un componente de navegación de pie de página receptivo con un estilo de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque. Es compatible con el modo oscuro e incluye imágenes de marcador de posición.