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

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen, die mit Neumorphismus und Erdtönen für Social-Media-Netzwerkschnittstellen gestaltet ist und Unterstützung für dunkle Themen bietet.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto py-8">
    <!-- Title -->
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">User Mentions</h2>

    <!-- Mentions List -->
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg p-5">
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">@john_doe</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
        <div class="flex items-center space-x-4 p-3 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition-all">
            <img src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-sm">
            <div class="flex-1">
                <p class="font-medium text-gray-800 dark:text-gray-200">Mike Taylor</p>
                <p class="text-gray-500 dark:text-gray-400">@mike_taylor</p>
            </div>
            <img src="https://picsum.photos/48/48" alt="Post Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

Verwandte Komponenten

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.

Offen

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle Komponente für Benutzererwähnungen mit Unterstützung für dunkle Themen, die für Unternehmenswebsites entwickelt wurde. Bietet Mikrointeraktionen mit Tailwind CSS und einem erdfarbenen Farbschema.

Offen

Komponente "Benutzererwähnungen"

Ein reaktionsschneller Benutzer erwähnt eine Komponente mit Unterstützung für dunkle Themen und Mikrointeraktionen, die für Unternehmenswebsites mit Tailwind CSS entwickelt wurde.

Offen