Composant Mentions de l’utilisateur
Un utilisateur de style Neumorphism mentionne un composant utilisant des tons de terre pour un site Web de portfolio, avec un design réactif et une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Mentions de l’utilisateur
Un composant de mention utilisateur avec conception 3D, effets réactifs et prise en charge du thème sombre à 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 de mentions d’utilisateur réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les sites Web d’entreprise utilisant Tailwind CSS.