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.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
<ul class="list-disc pl-5">
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@john_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@jane_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@mark_smith</span>
</li>
</ul>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
</div>
</div>Componentes relacionados
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.
Componente de menciones de usuario
Un usuario responsivo menciona un componente diseñado para el modo oscuro con soporte CSS de Tailwind.
Componente de menciones de usuario
Un componente de mención de usuario receptivo diseñado para interfaces de comercio electrónico en modo oscuro, con tonos tierra y avatares de usuario de marcador de posición e imágenes de productos. Proporciona una lista de menciones sugeridas con detalles del usuario y un producto asociado, adecuado para funciones de etiquetado o colaboración.