Componentes sociales
Una sección de componentes sociales diseñada en estilo skeuomórfico, con efectos responsivos y soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
<div class="flex flex-row space-x-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
</div>
</div>
<div class="mt-6 flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
<h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>Componentes relacionados
Componente de Componentes Sociales
Un componente de redes sociales receptivo con soporte de modo oscuro para sitios web comerciales, con un esquema de color triádico.
Componente de Componentes Sociales
Componente de componentes sociales con diseño brutalista, efectos responsivos y soporte para temas oscuros.
Tarjeta de autor social 3D
Un componente de tarjeta de autor responsivo con efectos 3D y enlaces a redes sociales, diseñado para secciones de blog/contenido. Cuenta con un esquema de color complementario (azul para identidad/información, naranja para acentos/CTA), admite el modo oscuro y utiliza Tailwind CSS para el estilo. El diseño es de complejidad "simple" con un diseño básico y elementos mínimos, sin embargo, se incorpora un "diseño 3D" para mayor profundidad y compromiso mediante sombras y efectos de desplazamiento. El componente incluye un avatar, el nombre del autor, una breve biografía, iconos de redes sociales y un botón de llamada a la acción "Sígueme". Utiliza un avatar randomuser.me como marcador de posición.