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.
Código HTML
<footer class="bg-gray-800 text-white p-6 mt-8">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex flex-col items-center md:items-start">
<h2 class="text-lg font-bold mb-2">Stay Connected</h2>
<p class="text-sm">Follow us on our social channels!</p>
<div class="flex space-x-4 mt-2">
<a href="#" class="bg-blue-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">FB</a>
<a href="#" class="bg-blue-400 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">TW</a>
<a href="#" class="bg-red-600 p-2 rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110">IG</a>
</div>
</div>
<div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
<h2 class="text-lg font-bold mb-2">About Us</h2>
<ul class="text-sm space-y-1">
<li><a href="#" class="hover:underline">Our Story</a></li>
<li><a href="#" class="hover:underline">Career</a></li>
<li><a href="#" class="hover:underline">Contact</a></li>
</ul>
</div>
<div class="flex flex-col items-center md:items-start mt-6 md:mt-0">
<h2 class="text-lg font-bold mb-2">User Profiles</h2>
<div class="flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
</div>
</div>
</div>
<div class="mt-6 text-center text-sm">
<p>© 2023 Your Company. All Rights Reserved.</p>
<p class="text-gray-400">Powered by <a href="#" class="text-white hover:underline">Your Technology</a></p>
</div>
</footer>
<style>
@media (prefers-color-scheme: dark) {
footer {
background-color: #1f1f1f;
}
footer a {
color: #white;
}
footer a:hover {
color: #cbd5e1;
}
}
</style>Componentes relacionados
Componente de navegación de pie de página
Un componente de navegación de pie de página simple diseñado en un estilo brutalista con un esquema de color triádico para interfaces de redes sociales. Incluye enlaces e imágenes de avatar, con soporte para modo oscuro.
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
Un componente de navegación de pie de página simple diseñado en estilo Glassmorphism con un esquema de color monocromático. Es responsivo, admite el modo oscuro y es adecuado para sitios web de comercio electrónico.