Componentes sociales
Un componente web con un diseño de morfismo de vidrio con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
<div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-80 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Connect with Us</h2>
<div class="flex items-center justify-around flex-wrap mb-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=1" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 1</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=2" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 2</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=3" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 3</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
</div>
<div class="text-center">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">View More</button>
</div>
</div>
</div>Componentes relacionados
Componente de Componentes Sociales
Un componente social simple y elegante diseñado para plataformas de música y audio con una combinación de colores de alto contraste y un estilo lujoso, con perfil de usuario, seguidores y métricas de participación. Totalmente receptivo con soporte para modo oscuro.
Componente de Componentes Sociales
Un componente social complejo y vibrante para páginas de blog/contenido, que se centra en microinteracciones con botones para compartir, me gusta, comentarios y guardar. Incluye capacidad de respuesta completa y soporte para modo oscuro.
Componente de Componentes Sociales
Un componente social simple diseñado con un estilo skeuomórfico utilizando colores vibrantes para un sitio comercial profesional, diseño receptivo con soporte para modo oscuro.