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.
Código HTML
<div class="container mx-auto p-8 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Mentions</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
</div>
</div>
<div class="flex items-center bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-inner dark:shadow-inner-dark">
<img class="w-12 h-12 rounded-full mr-4 shadow dark:shadow-dark" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un componente de menciones de usuario receptivo diseñado con estilo retro / vintage y combinación de colores análoga, compatible con el modo oscuro. Cuenta con avatares de usuario, nombres y texto de mensajes adecuados para interfaces de redes sociales.
Componente de menciones de usuario
Componente de menciones de usuario con soporte para modo oscuro, con efectos responsivos y soporte para temas oscuros. Utiliza imágenes de marcador de posición aleatorias de picsum.photos para las imágenes y randomuser.me para los avatares.
Componente de menciones de usuario
Un usuario responsivo menciona el componente con soporte para temas oscuros y microinteracciones, diseñado para sitios web comerciales que utilizan Tailwind CSS.