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.
Codice HTML
<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>Componenti correlati
Componente Menzioni utente
Un componente reattivo per le menzioni utente con design Glassmorphism, combinazione di colori analoga e supporto per temi scuri.
Componente Menzioni utente
Un utente menziona il componente che utilizza Tailwind CSS con design Glassmorphism, reattività e supporto per temi scuri.
Componente Menzioni utente
Un utente reattivo menziona un componente con supporto per temi scuri e microinterazioni, progettato per siti Web aziendali che utilizzano Tailwind CSS.