Componente de Componentes Sociales
Un componente de redes sociales diseñado para un portafolio, con diseño responsivo y soporte de temas oscuros usando Tailwind CSS. Incluye marcadores de posición para avatares y nombres de usuarios.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md w-full max-w-sm mx-auto">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Jane Doe</h2>
</div>
<p class="mt-4 text-gray-600 dark:text-gray-300">Sharing my latest design project! Check out the details and let me know what you think.</p>
<div class="flex justify-between items-center mt-6">
<div class="flex space-x-4">
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.803 2.855l-1.782 5.583a2 2 0 01-1.803 1.112H9.118c-.748 0-1.504-.316-1.88-.922l-.443-.665A2 2 0 015 15.999v-3l2-2h2.586a1 1 0 01.707.293l2.586 2.586z"></path></svg>
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815Thead6C.851 17.542.001 14.824.001 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
</div>
<span class="text-gray-500 dark:text-gray-400 text-sm">2h ago</span>
</div>
</div>Componentes relacionados
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.
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.
Componente de Componentes Sociales
Un componente simple de redes sociales que usa Tailwind CSS y está diseñado con los principios de Material Design. Cuenta con colores vibrantes y compatibilidad con el modo oscuro, lo que lo hace adecuado para interfaces de redes sociales.