Composant Mentions de l’utilisateur
Un utilisateur rétro-vintage mentionne un composant pour le commerce électronique avec des couleurs triadiques, une complexité modérée, une réactivité et une prise en charge du mode sombre. Pas de JavaScript.
HTML Code
<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>Composants associés
Composant Mentions de l’utilisateur
Un composant conçu avec des micro-interactions, avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un utilisateur mentionne un composant pour un tableau de bord, doté d’une palette de couleurs monochromatiques, d’une mise en page simple, d’un design réactif et d’une prise en charge du thème sombre, à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateurs avec prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Les images proviennent de picsum.photos et les avatars de randomuser.me.