Componente de menciones de usuario
Un usuario complejo menciona el componente para CRM/Business Tools, que presenta un esquema de color degradado púrpura/violeta y transiciones suaves. Totalmente receptivo con soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de menciones de usuario
Un componente de mención de usuario simple y receptivo con diseño de skeuomorfismo, combinación de colores análoga y compatibilidad con el modo oscuro.
Componente de menciones de usuario
Un componente de mención de usuario diseñado con un estilo de cristal con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque. Incluye un soporte de tema oscuro y es responsivo, lo que lo hace adecuado para sitios web de comercio electrónico.
Componente de menciones de usuario
Un simple componente de menciones de usuario diseñado en un estilo brutalista con un esquema de color en escala de grises, adecuado para sitios web comerciales y corporativos. Incluye menciones de usuarios con avatares y es responsivo con soporte para temas oscuros.