Componente de pie de página de redes sociales
Un componente de pie de página responsivo para interfaces de redes sociales, diseñado con los principios de Material Design utilizando un esquema de color azul monocromático. Cuenta con diseños basados en cuadrículas, efectos de profundidad (sombras), animaciones de desplazamiento y transición para elementos interactivos, un formulario de suscripción al boletín, íconos sociales, avatares de usuario y soporte para el modo oscuro a través del modificador dark: de Tailwind.
Código HTML
<footer class="bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 shadow-inner pt-16 pb-8 transition-colors duration-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<!-- Brand & Description -->
<div>
<img class="h-8 mb-4 rounded shadow-md" src="https://picsum.photos/100/40?grayscale" alt="SocialNet Logo" />
<h2 class="text-lg font-semibold mb-2">About SocialNet</h2>
<p class="text-sm leading-relaxed">Connect with friends, share your moments, and explore what's happening around you.</p>
</div>
<!-- Useful Links -->
<div class="grid grid-cols-2 gap-8">
<div>
<h3 class="text-sm font-semibold mb-3">Product</h3>
<ul class="space-y-2">
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Features</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Integrations</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Privacy</a></li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold mb-3">Company</h3>
<ul class="space-y-2">
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">About Us</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Careers</a></li>
<li><a href="#" class="text-sm transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-300">Contact</a></li>
</ul>
</div>
</div>
<!-- Subscription & Social Icons -->
<div>
<h3 class="text-sm font-semibold mb-4">Stay Connected</h3>
<form class="flex flex-col sm:flex-row sm:items-center space-y-3 sm:space-y-0 sm:space-x-2">
<input type="email" placeholder="Your email" class="flex-grow px-3 py-2 bg-blue-100 dark:bg-blue-800 border border-blue-200 dark:border-blue-700 text-sm placeholder-blue-400 dark:placeholder-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition-colors duration-200" />
<button type="submit" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow hover:shadow-lg transition-all duration-200">Subscribe</button>
</form>
<div class="mt-6 flex space-x-4">
<a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<!-- Facebook Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.407.593 24 1.324 24H12V14.709h-3.292v-3.63H12V8.271c0-3.265 1.993-5.043 4.897-5.043 1.392 0 2.586.104 2.934.15v3.403l-2.015.001c-1.58 0-1.885.752-1.885 1.85v2.426h3.77l-.492 3.63h-3.278V24h6.422c.73 0 1.324-.593 1.324-1.324V1.324C24 .593 23.407 0 22.676 0z"/></svg>
</a>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<!-- Twitter Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M24 4.557a9.93 9.93 0 0 1-2.827.775 4.93 4.93 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.195 4.916 4.916 0 0 0-8.384 4.482A13.94 13.94 0 0 1 1.671 3.149 4.916 4.916 0 0 0 3.194 9.723 4.9 4.9 0 0 1 .964 9.1v.062a4.917 4.917 0 0 0 3.941 4.817 4.913 4.913 0 0 1-2.212.084 4.919 4.919 0 0 0 4.594 3.417A9.868 9.868 0 0 1 .48 19.292 13.94 13.94 0 0 0 7.548 21c9.356 0 14.407-7.721 13.995-14.646A10.025 10.025 0 0 0 24 4.557z"/></svg>
</a>
<a href="#" class="text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">
<!-- Instagram Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 fill-current" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 2.052.248 2.528.415a5.003 5.003 0 0 1 1.845 1.17 5.006 5.006 0 0 1 1.17 1.845c.167.476.359 1.322.415 2.528.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.248 2.052-.415 2.528a5.002 5.002 0 0 1-1.17 1.845 5.004 5.004 0 0 1-1.845 1.17c-.476.167-1.322.359-2.528.415-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-2.052-.248-2.528-.415a4.993 4.993 0 0 1-1.845-1.17 4.994 4.994 0 0 1-1.17-1.845c-.167-.476-.359-1.322-.415-2.528C2.175 15.747 2.163 15.367 2.163 12s.012-3.584.07-4.85c.056-1.206.248-2.052.415-2.528a5.005 5.005 0 0 1 1.17-1.845 5.005 5.005 0 0 1 1.845-1.17c.476-.167 1.322-.359 2.528-.415C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.332.013 7.052.072 5.775.131 4.836.343 4.1.626a7.005 7.005 0 0 0-2.541 1.636A7.005 7.005 0 0 0 .626 4.1C.343 4.836.131 5.775.072 7.052.013 8.332 0 8.741 0 12s.013 3.668.072 4.948c.059 1.277.271 2.216.554 2.952a7.002 7.002 0 0 0 1.636 2.541 7.003 7.003 0 0 0 2.541 1.636c.736.283 1.675.495 2.952.554C8.332 23.987 8.741 24 12 24s3.668-.013 4.948-.072c1.277-.059 2.216-.271 2.952-.554a7.006 7.006 0 0 0 2.541-1.636 7.004 7.004 0 0 0 1.636-2.541c.283-.736.495-1.675.554-2.952.059-1.28.072-1.689.072-4.948s-.013-3.668-.072-4.948c-.059-1.277-.271-2.216-.554-2.952a7.003 7.003 0 0 0-1.636-2.541A7.005 7.005 0 0 0 19.9.626c-.736-.283-1.675-.495-2.952-.554C15.668.013 15.259 0 12 0z"/><path d="M12 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-10.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/></svg>
</a>
</div>
</div>
</div>
<div class="mt-12 flex flex-col md:flex-row items-center justify-between border-t border-blue-200 dark:border-blue-700 pt-6">
<p class="text-xs">© 2023 SocialNet. All rights reserved.</p>
<div class="flex -space-x-2 mt-4 md:mt-0">
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" />
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/35.jpg" alt="User avatar" />
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User avatar" />
<img class="w-8 h-8 rounded-full border-2 border-white dark:border-blue-900 shadow-md transition-transform transform hover:scale-110" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User avatar" />
</div>
</div>
</div>
</footer>Componentes relacionados
Componente de pie de página
Componente de pie de página responsivo con estilo Skeuomorphism, combinación de colores de tonos tierra y soporte para temas oscuros, diseñado para redes sociales".
Componente de pie de página
Un componente de pie de página diseñado en un estilo skeuomórfico con un esquema de color triádico y complejidad moderada, adecuado para un diseño de blog/contenido.
Pie de página Componente Pie de página
Un componente de pie de página simple con un sutil diseño de Skeuomorphism, que utiliza un esquema de color análogo. Incluye un aviso de derechos de autor, algunos enlaces de navegación e iconos de redes sociales. El diseño es responsivo y admite el modo oscuro.