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

Komponente "Benutzererwähnungen"

Eine reaktionsschnelle User Mentions-Komponente, die im Retro/Vintage-Stil und mit analogem Farbschema gestaltet wurde und den Dunkelmodus unterstützt. Es verfügt über Benutzer-Avatare, Namen und Nachrichtentexte, die für Social-Media-Schnittstellen geeignet sind.

Vorschau

HTML-Code 

<div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
        <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">John Doe</span>
            <p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Jane Smith</span>
            <p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
        </div>
    </div>
    <div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
        <div class="flex flex-col">
            <span class="text-black dark:text-white font-semibold">Michael Brown</span>
            <p class="text-gray-700 dark:text-gray-400">Started following you</p>
        </div>
    </div>
</div>

Verwandte Komponenten

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"

Benutzererwähnungen Komponente mit Glassmorphism-Stil, Pastell-Farbschema und komplexer Komplexitätsstufe für E-Commerce, mit responsivem Design und Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.

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