Componente de menciones de usuario
Un componente de menciones de usuario receptivo con neumorfismo y tonos tierra para interfaces de redes sociales, con soporte para temas oscuros.
Código HTML
<div class="max-w-md mx-auto py-8">
<!-- Title -->
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>
<!-- Mentions List -->
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
<img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
<div class="flex-1">
<p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
<p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
</div>
<img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
</div>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un componente de menciones de usuario receptivo con elementos de diseño 3D, combinación de colores en escala de grises y soporte de temas oscuros para sitios web comerciales / corporativos. Utiliza Tailwind CSS e incluye imágenes/avatares de marcador de posición.
Componente de menciones de usuario
Componente de menciones de usuario con estilo Glassmorphism, combinación de colores pastel y nivel de complejidad complejo para comercio electrónico, con diseño receptivo y soporte de temas oscuros, utilizando Tailwind CSS.
Componente de menciones de usuario
Un usuario con estilo Neumorphism menciona el componente que usa tonos tierra para un sitio web de portafolio, con diseño receptivo y soporte para modo oscuro.