Componentes Menciones de usuarios Menciones de usuario Componente 15

Menciones de usuario Componente 15

Un componente web que muestra las menciones del usuario en un estilo de Material Design, con efectos responsivos y compatibilidad con temas oscuros.

Vista previa

Código HTML

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
            </div>
        </li>
        <li class="flex items-center py-2">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
            <div>
                <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                <span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
            </div>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
    </div>
</div>

Componentes relacionados

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 minimalista, con soporte para el modo oscuro. Los avatares y nombres de usuario en los que se puede hacer clic se muestran en un diseño de caja flexible. El componente es responsive y se adapta a diferentes tamaños de pantalla.

Abrir

Componente de menciones de usuario

Un usuario complejo menciona el componente diseñado para paneles con soporte para modo oscuro y esquema de color triádico.

Abrir