User Mentions Component
A complex user mentions component for CRM/Business Tools, featuring a purple/violet gradient color scheme and smooth transitions. Fully responsive with dark mode support.
HTML Code
<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>Related Components
User Mentions Component
A User Mentions Component designed with microinteractions, featuring responsive effects and dark theme support, built using Tailwind CSS.
User Mentions Component
A simple, responsive User Mentions component with a glassmorphism design, corporate blue color scheme, and dark mode support, suitable for dashboard interfaces.
User Mentions Component
A responsive User Mentions Component with 3D design elements, grayscale color scheme, and dark theme support for business/corporate websites. Uses Tailwind CSS and includes placeholder images/avatars.