Componente Menzioni utente
Un componente reattivo per le menzioni dell'utente con elementi di progettazione 3D, combinazione di colori in scala di grigi e supporto per temi scuri per siti Web aziendali/aziendali. Utilizza Tailwind CSS e include immagini/avatar segnaposto.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
<div class="relative p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">User Mentions</h2>
<div class="space-y-4">
<div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment.</p>
</div>
</div>
<div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Replied to your thread.</p>
</div>
</div>
<div class="flex items-center bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow-md transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Liked your post.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Menzioni utente
Un componente reattivo per le menzioni dell'utente con neumorfismo e toni della terra per le interfacce di rete dei social media, con supporto per temi scuri.
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.
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.