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

Komponente "Benutzererwähnungen"

Eine einfache und minimalistische Benutzererwähnungskomponente für Blogs und den Konsum von Inhalten mit einem responsiven Design mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
    <ul class="mt-4 space-y-4">
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
        </li>
        <li class="flex items-center space-x-3">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
                <p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
            </div>
        </li>
    </ul>
    <div class="mt-6">
        <button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
    </div>
</div>

Verwandte Komponenten

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es wird kein JavaScript benötigt, nur HTML mit Tailwind-Klassen. Verwenden Sie für den Dunkelmodus das Präfix dark: von Tailwind für das Styling. Die Bilder stammen von picsum.photos und Avatare von randomuser.me.

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

Komponente "Benutzererwähnungen"

Ein Benutzer erwähnt eine Komponente, die Tailwind CSS mit Glassmorphism-Design, Reaktionsfähigkeit und Unterstützung für dunkle Themen verwendet.

Offen