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.
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.
Componente de menciones de usuario
Un usuario skeuomórfico menciona un componente diseñado para imitar elementos del mundo real, con efectos responsivos y soporte para temas oscuros utilizando Tailwind CSS.
Componente de menciones de usuario
Un usuario responsivo menciona un componente diseñado para el modo oscuro con soporte CSS de Tailwind.