CCHub Logo CCHub Tailwind Collection
Komponenten Erwähnungen von Benutzern Benutzererwähnungen Komponente 15

Benutzererwähnungen Komponente 15

Eine Webkomponente, die Benutzererwähnungen im Material Design-Stil anzeigt, mit responsiven Effekten und Unterstützung für dunkle Designs.

Vorschau

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>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Eine komplexe Benutzererwähnungskomponente für CRM/Business Tools mit einem violetten/violetten Farbschema und fließenden Übergängen. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen

Komponente "Benutzererwähnungen"

Eine User Mentions-Komponente, die mit Mikrointeraktionen entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen

Komponente "Benutzererwähnungen"

Ein einfacher, reaktionsschneller Benutzer erwähnt eine Komponente mit Skeuomorphismus-Design, analogem Farbschema und Unterstützung für den Dunkelmodus.

Offen