Mentions de l’utilisateur Composant 15
Composant Web qui affiche les mentions des utilisateurs dans un style Material Design, avec des effets réactifs et la prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition duration-300 ease-in-out">
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Mentioned Users</h3>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="flex items-center py-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
<span class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</span>
</div>
</li>
<li class="flex items-center py-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
<span class="text-gray-500 dark:text-gray-400 text-sm">@janesmith</span>
</div>
</li>
<li class="flex items-center py-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
<span class="text-gray-500 dark:text-gray-400 text-sm">@alicejohnson</span>
</div>
</li>
</ul>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-md w-full h-auto">
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un composant conçu avec un style Glassmorphism avec des éléments translucides givrés ressemblant à du verre avec des effets de flou. Il comprend un support de thème sombre et est réactif, ce qui le rend adapté aux sites Web de commerce électronique.
Composant Mentions de l’utilisateur
Composant avec le style Glassmorphism, la palette de couleurs pastel et le niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre, à l’aide de Tailwind CSS.
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.