Componente Menzioni utente
Un utente complesso menziona il componente per CRM/Business Tools, caratterizzato da una combinazione di colori sfumata viola/viola e transizioni fluide. Completamente reattivo con supporto per la modalità scura.
Codice HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 via-purple-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 min-h-screen font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-500 hover:shadow-2xl">
<div class="p-6 sm:p-8 bg-gradient-to-r from-purple-600 to-indigo-700 dark:from-purple-800 dark:to-indigo-900 text-white flex items-center justify-between">
<h2 class="text-2xl sm:text-3xl font-extrabold tracking-tight text-white dark:text-gray-100 drop-shadow-lg">Recent User Mentions</h2>
<button class="px-4 py-2 bg-purple-700 hover:bg-purple-800 dark:bg-purple-900 dark:hover:bg-purple-800 text-white rounded-full text-sm font-semibold transition-all duration-300 transform hover:scale-105 shadow-md flex items-center group">
<svg class="w-5 h-5 mr-1 text-white group-hover:rotate-12 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
<span class="hidden sm:inline">New Mention</span>
</button>
</div>
<div class="p-6 sm:p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
<!-- Mention Card 1 -->
<div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
<div>
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">Eleanor Pena</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@eleanor_p</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
"Just wanted to give a shoutout to @crm_plus for their amazing new analytics dashboard. Super intuitive and has saved us so much time! #CRM #BusinessTools"
</p>
<div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
<span>2 hours ago</span>
<div class="flex space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
</div>
</div>
</div>
<!-- Mention Card 2 -->
<div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
<div>
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">Ralph Edwards</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@ralphedwards</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
"Experiencing some minor bugs with the new @crm_plus update, specifically with exporting contacts. Any workarounds? #CRMSupport"
</p>
<div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
<span>6 hours ago</span>
<div class="flex space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100 transition-colors duration-300">Neutral</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
</div>
</div>
</div>
<!-- Mention Card 3 -->
<div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">Robert Fox</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@robert_f</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
"Highly recommend @crm_plus for small businesses! Their customer support is top-notch. They helped me integrate everything seamlessly. #CRM"
</p>
<div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
<span>1 day ago</span>
<div class="flex space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
</div>
</div>
</div>
<!-- Mention Card 4 -->
<div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div>
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">Jane Cooper</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@janecooper</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
"The new reporting features in @crm_plus are a game-changer! So much easier to visualize our sales pipeline now. Fantastic update."
</p>
<div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
<span>2 days ago</span>
<div class="flex space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
</div>
</div>
</div>
<!-- Mention Card 5 -->
<div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<div>
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">Wade Warren</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@wadewarren</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
"Considering switching to @crm_plus from our current system. Anyone have experience with their migration tools? Looking for something pain-free."
</p>
<div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
<span>3 days ago</span>
<div class="flex space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 transition-colors duration-300">Inquiry</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
</div>
</div>
</div>
<!-- Mention Card 6 -->
<div class="bg-white dark:bg-gray-700 rounded-2xl p-5 shadow-lg transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl focus-within:ring-4 focus-within:ring-purple-300 dark:focus-within:ring-purple-600 lg:col-span-1">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover ring-2 ring-purple-400 dark:ring-purple-600 transition-transform duration-300 hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<p class="font-bold text-lg text-gray-900 dark:text-gray-100">Esther Howard</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@esther.h</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 line-clamp-3 text-sm leading-relaxed">
"Loving the custom automation features in @crm_plus! It's freed up so much time for my team to focus on high-value tasks. Highly recommend."
</p>
<div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-400">
<span>4 days ago</span>
<div class="flex space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100 transition-colors duration-300">Positive</span>
<a href="#" class="text-purple-600 dark:text-purple-400 hover:underline hover:text-purple-800 dark:hover:text-purple-300 transition-colors duration-300">View context</a>
</div>
</div>
</div>
</div>
<div class="p-6 sm:p-8 border-t border-purple-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-center">
<button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white font-semibold rounded-full shadow-lg transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
Load More Mentions
</button>
</div>
</div>
</div>
<style>
/* This is a simple keyframe animation for fade-in */
@keyframes fade-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in > div {
animation: fade-in 0.6s ease-out forwards;
opacity: 0; /* Ensures elements are hidden before animation */
}
/* Stagger animation for cards */
.animate-fade-in > div:nth-child(1) { animation-delay: 0.1s; }
.animate-fade-in > div:nth-child(2) { animation-delay: 0.2s; }
.animate-fade-in > div:nth-child(3) { animation-delay: 0.3s; }
.animate-fade-in > div:nth-child(4) { animation-delay: 0.4s; }
.animate-fade-in > div:nth-child(5) { animation-delay: 0.5s; }
.animate-fade-in > div:nth-child(6) { animation-delay: 0.6s; }
/* Add a smooth focus ring for accessibility */
:focus-visible {
outline: none;
}
/* Custom scrollbar for subtle overflow visualization if needed */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.dark ::-webkit-scrollbar-track {
background: #333;
}
::-webkit-scrollbar-thumb {
background: #a78bfa; /* purple-400 */
border-radius: 10px;
}
.dark ::-webkit-scrollbar-thumb {
background: #8b5cf6; /* purple-500 */
}
::-webkit-scrollbar-thumb:hover {
background: #8B5CF6; /* purple-500 */
}
.dark ::-webkit-scrollbar-thumb:hover {
background: #7c3aed; /* purple-600 */
}
</style>Componenti correlati
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 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 menziona il componente che utilizza Tailwind CSS con design Glassmorphism, reattività e supporto per temi scuri.