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

Komponente "Benutzererwähnungen"

Ein skeuomorpher Benutzer erwähnt eine Komponente, die entwickelt wurde, um reale Elemente nachzuahmen, mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
    <div class="flex flex-col gap-3">
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">@john_doe</p>
            </div>
        </div>
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
            </div>
        </div>
        <div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
            <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
            <div class="ml-4">
                <p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">@michael_j</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Eine komplexe, reaktionsschnelle Benutzererwähnungskomponente für Bildungsplattformen mit einem Aquarell-/Kunststil, einem coolen neutralen Farbschema und Unterstützung für den Dunkelmodus. Mit Benutzer-Avataren, Namen, Rollen und einem subtilen Aquarell-Hintergrundeffekt.

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

Komponente "Benutzererwähnungen"

Eine Komponente für Benutzererwähnungen mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen