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.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">User Mentions</h2>
<div class="space-y-4">
<!-- Mention 1 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Mentioned you in a post</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
<!-- Mention 2 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">John Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Replied to your comment</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
<!-- Mention 3 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">Jessica Williams</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Liked your photo</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Menzioni utente
Un componente di menzione dell'utente con design 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente Menzioni utente
Un utente menziona un componente progettato con uno stile Glassmorphism con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Include un supporto per il tema scuro ed è reattivo, il che lo rende adatto per i siti di e-commerce.
Componente Menzioni utente
Un utente in stile Neumorfismo menziona un componente che utilizza i toni della terra per un sito web di portfolio, con design reattivo e supporto per la modalità oscura.