Componentes Menciones de usuarios Componente de menciones de usuario

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.

Vista previa

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 componente de menciones de usuario simple y receptivo con un diseño de morfismo de vidrio, esquema de color azul corporativo y soporte de modo oscuro, adecuado para interfaces de tablero.

Abrir

Componente de menciones de usuario

Un componente de mención de usuario simple y receptivo con diseño de skeuomorfismo, combinación de colores análoga y compatibilidad con el modo oscuro.

Abrir

Componente de menciones de usuario

Un componente de mención de usuario simple y receptivo con un estilo de glassmorphism vibrante, adecuado para aplicaciones de redes sociales. Incluye soporte para modo oscuro.

Abrir