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"

Benutzererwähnungen Komponente, die den Glassmorphism-Stil mit responsivem Design und Unterstützung für den Dunkelmodus implementiert.

Offen

Komponente "Benutzererwähnungen"

Ein Benutzer erwähnt eine Komponente für ein Dashboard mit einem monochromatischen Farbschema, einfachem Layout, responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

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