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.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-b from-gray-800 to-gray-900">
<div class="w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">User Mentions</h2>
<div class="mt-4 space-y-4">
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@john_doe</p>
</div>
<img src="https://picsum.photos/200/100" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@jane_smith</p>
</div>
<img src="https://picsum.photos/200/101" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
<div class="flex items-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-shadow">
<img src="https://randomuser.me/api/portraits/men/13.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-500">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-medium">Mike Johnson</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">@mike_johnson</p>
</div>
<img src="https://picsum.photos/200/102" alt="Product Image" class="ml-auto rounded-lg shadow-lg w-16 h-16">
</div>
</div>
<button class="mt-6 bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-300 w-full">View More</button>
</div>
</div>Componenti correlati
Componente Menzioni utente
Un componente reattivo per le menzioni dell'utente con supporto per il tema scuro, progettato per i siti Web aziendali. Presenta microinterazioni che utilizzano Tailwind CSS e una combinazione di colori color terra.
Componente Menzioni utente
Un utente menziona un componente per una dashboard, caratterizzato da una combinazione di colori monocromatica, layout semplice, design reattivo e supporto per temi scuri, utilizzando Tailwind CSS.
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.