Componente de menciones de usuario
Un usuario retro-vintage menciona el componente para el comercio electrónico con colores triádicos, complejidad moderada, capacidad de respuesta y soporte para modo oscuro. Sin JavaScript.
Código HTML
<div class="container mx-auto px-4 py-8 theme-changer and dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- User Mention Card -->
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-purple-500 dark:border-purple-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">Rad RetroDude86</h3>
<p class="text-gray-600 dark:text-gray-300">Active Shopper</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4">
Just bought the awesome ' totally tubular ' t-shirt! This store is maximum cool! #retrofashion #ecommercewin
</p>
<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
<span>Mentioned Product ♥</span>
<img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroshirt/150/150" alt="Product Image">
</div>
</div>
<!-- User Mention Card eo -->
<!-- User Mention Card -->
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-yellow-500 dark:border-yellow-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<div>
<h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">NeonLightsQueen</h3>
<p class="text-gray-600 dark:text-gray-300">New Arrival Enthusiast</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4">
OMG, the new accessories are so fetch! Totally loving the vibe. Can't wait for more! #80sstyle #shopaholic
</p>
<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
<span>Mentioned Product ♥</span>
<img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retrobag/150/150" alt="Product Image">
</div>
</div>
<!-- User Mention Card eo -->
<!-- User Mention Card -->
<div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 transform transition-transform duration-300 hover:scale-105 border-4 border-green-500 dark:border-green-600">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div>
<h3 class="text-xl font-bold text-blue-600 dark:text-blue-400">SynthwaveSam</h3>
<p class="text-gray-600 dark:text-gray-300">Vinyl Collector</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4">
Scored some classic vinyls from here. Sounding totally rad on my setup! Highly recommend! #vinylcollection #musiconline
</p>
<div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
<span>Mentioned Product ♥</span>
<img class="w-16 h-16 object-cover rounded" src="https://picsum.photos/seed/retroviny/150/150" alt="Product Image">
</div>
</div>
<!-- User Mention Card eo -->
</div>
</div>Componentes relacionados
Componente de menciones de usuario
Un componente de menciones de usuario receptivo con diseño de Glassmorphism, combinación de colores análoga y compatibilidad con temas oscuros.
Componente de menciones de usuario
Un simple componente de menciones de usuario diseñado en un estilo brutalista con un esquema de color en escala de grises, adecuado para sitios web comerciales y corporativos. Incluye menciones de usuarios con avatares y es responsivo con soporte para temas oscuros.
Componente de menciones de usuario
Un componente de mención de usuario simple y minimalista, con soporte para el modo oscuro. Los avatares y nombres de usuario en los que se puede hacer clic se muestran en un diseño de caja flexible. El componente es responsive y se adapta a diferentes tamaños de pantalla.