L'utente menziona il componente 15
Un componente Web che visualizza le menzioni dell'utente in uno stile Material Design, con effetti reattivi e supporto per temi scuri.
Codice HTML
<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>
Componenti correlati
Componente Menzioni utente
Un componente reattivo per le menzioni dell'utente con elementi di progettazione 3D, combinazione di colori in scala di grigi e supporto per temi scuri per siti Web aziendali/aziendali. Utilizza Tailwind CSS e include immagini/avatar segnaposto.
Componente Menzioni utente
Un utente reattivo menziona un componente progettato per la modalità oscura con supporto CSS Tailwind.
Componente Menzioni utente
Un utente menziona un componente per una dashboard, caratterizzato da una combinazione di colori monocromatica, layout semplice, design reattivo e supporto per temi scuri, utilizzando Tailwind CSS.