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.
Código HTML
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
<div class="flex flex-col gap-3">
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@john_doe</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
<p class="text-gray-600 dark:text-gray-400">@michael_j</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Componente de menciones de usuario que implementa el estilo Glassmorphism con diseño responsivo y soporte de modo oscuro.
Componente de menciones de usuario
Un componente de menciones de usuario responsivo con soporte para temas oscuros, diseñado para sitios web comerciales. Presenta microinteracciones usando Tailwind CSS y un esquema de color de tono tierra.
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.