Componenti Menzioni degli utenti Componente Menzioni utente

Componente Menzioni utente

Un componente reattivo menzionato dall'utente progettato con stile retrò / vintage e combinazione di colori analoga, che supporta la modalità oscura. Presenta avatar utente, nomi e testo dei messaggi adatti alle interfacce dei social media.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente Menzioni dell'utente - Skeuomorphism

L'utente menziona il componente con design scheumorfismo, effetti reattivi e supporto per temi scuri utilizzando solo html con css tailwind. Non è necessario alcun javascript.

Aperto

Componente Menzioni utente

Un utente complesso, ispirato al 3D, menziona un componente con colori autunnali, adatto per i marchi di moda/bellezza. Presenta avatar utente, nomi, ruoli e un conteggio delle menzioni, con piena reattività e supporto per la modalità oscura.

Aperto

Componente Menzioni utente

Un utente complesso menziona un componente progettato per le dashboard con supporto della modalità oscura e combinazione di colori triadica.

Aperto