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"

Benutzererwähnungen Komponente mit Unterstützung für den Dunkelmodus, mit reaktionsschnellen Effekten und Unterstützung für dunkle Themen. Verwendet zufällige Platzhalterbilder aus picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Komponente "Benutzererwähnungen"

Eine einfache Komponente für Benutzererwähnungen, die im brutalistischen Stil mit einem Graustufen-Farbschema gestaltet ist und für Geschäfts- und Unternehmenswebsites geeignet ist. Es enthält Benutzererwähnungen mit Avataren und ist reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Benutzererwähnungen Komponente - Skeuomorphismus

Der Benutzer erwähnt eine Komponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen, die nur HTML mit Rückenwind-CSS verwenden. Kein Javascript erforderlich.

Offen