Componente de Componentes Sociales
Un componente social brutalista que muestra un diseño audaz con alto contraste, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. Presenta avatares de usuario, enlaces a redes sociales e imágenes de marcador de posición.
Código HTML
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">John Doe</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Jane Smith</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Alice Johnson</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Bob Brown</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
<div class="flex space-x-4 mt-2">
<a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
<a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
<a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
<a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
</div>
</div>
</div>
Componentes relacionados
Social_Components_Documentation_Wiki
Un componente social complejo y responsivo para sitios de documentación/wiki, con degradados de color otoñales y transiciones suaves con soporte para modo oscuro.
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.
Componente de Componentes Sociales
Un componente social brutalista, complejo y centrado en el comercio electrónico con un esquema de color análogo, implementado con Tailwind CSS. Es sensible y admite el modo oscuro.