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

Komponente "Benutzererwähnungen"

Ein reaktionsschneller Benutzer erwähnt eine Komponente, die für den Dunkelmodus mit Tailwind CSS-Unterstützung entwickelt wurde.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold mb-2">Mentions</h2>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">John Doe</p>
            <p class="text-gray-400 text-sm">@johndoe</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Jane Smith</p>
            <p class="text-gray-400 text-sm">@janesmith</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex-1">
            <p class="font-medium">Mike Johnson</p>
            <p class="text-gray-400 text-sm">@mikejohnson</p>
        </div>
    </div>
    <a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
        }
    }
</style>

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"

Ein komplexer, minimalistischer Benutzer erwähnt eine Komponente, die für Bildungsplattformen entwickelt wurde und ein Neon-/Elektro-Farbschema, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus bietet. Es zeigt die letzten Erwähnungen mit Benutzer-Avataren, Nachrichten und Zeitstempeln an, einschließlich einer Schaltfläche "Alle anzeigen".

Offen

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