Componenti Menzioni degli utenti L'utente menziona il componente 15

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.

Anteprima

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.

Aperto

Componente Menzioni utente

Un utente reattivo menziona un componente progettato per la modalità oscura con supporto CSS Tailwind.

Aperto

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.

Aperto