Componente de menciones de usuario
Un componente de menciones de usuario responsivo con soporte para temas oscuros que usa Tailwind CSS. No se necesita JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Las imágenes son de picsum.photos y los avatares de randomuser.me.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-3xl mx-auto px-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">User Mentions</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end text-gray-500 dark:text-gray-400 text-sm">
<span>2 days ago</span>
</div>
</div>
<!-- Repeat similar blocks for other mentions -->
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un usuario complejo y minimalista menciona un componente diseñado para plataformas educativas, con un esquema de color neón/eléctrico, capacidad de respuesta y compatibilidad con el modo oscuro. Muestra menciones recientes con avatares de usuario, mensajes y marcas de tiempo, incluido un botón 'Ver todo'.
Componente de menciones de usuario
Un componente de menciones de usuario receptivo diseñado con estilo retro / vintage y combinación de colores análoga, compatible con el modo oscuro. Cuenta con avatares de usuario, nombres y texto de mensajes adecuados para interfaces de redes sociales.
Componente de menciones de usuario
Un usuario retro-vintage menciona el componente para el comercio electrónico con colores triádicos, complejidad moderada, capacidad de respuesta y soporte para modo oscuro. Sin JavaScript.