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

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
    <ul class="list-disc pl-5">
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@john_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@jane_doe</span>
        </li>
        <li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <span class="text-gray-800 dark:text-white">@mark_smith</span>
        </li>
    </ul>
    <div class="mt-4">
        <img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    </div>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Benutzererwähnungen"

Ein reaktionsschneller Benutzer erwähnt eine Komponente für Immobilienplattformen, die einen Aquarell-/künstlerischen Designstil mit Ozeanblautönen aufweist. Enthält interaktive Elemente und Unterstützung für den Dunkelmodus.

Offen

Komponente "Benutzererwähnungen"

Eine einfache, reaktionsschnelle Komponente für Benutzererwähnungen mit einem glasmorphistischen Design, einem blauen Farbschema für Unternehmen und Unterstützung für den Dunkelmodus, die für Dashboard-Schnittstellen geeignet ist.

Offen