Componentes Menciones de usuarios Componente de menciones de usuario

Componente de menciones de usuario

Un componente de mención de usuario con diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Vista previa

Código HTML

<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

Componentes relacionados

Componente de menciones de usuario

Un componente de menciones de usuario diseñado con microinteracciones, con efectos responsivos y compatibilidad con temas oscuros, construido con Tailwind CSS.

Abrir

Componente de menciones de usuario

Un usuario complejo inspirado en 3D menciona un componente con colores otoñales, adecuado para marcas de moda / belleza. Cuenta con avatares de usuario, nombres, roles y un recuento de menciones, con capacidad de respuesta completa y compatibilidad con el modo oscuro.

Abrir

Componente de menciones de usuario

Componente de menciones de usuario con soporte para modo oscuro, con efectos responsivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición aleatorias de picsum.photos para las imágenes y randomuser.me para los avatares.

Abrir