User Mentions 구성 요소
복잡한 사용자는 자주색/보라색 그라디언트 색 구성표와 부드러운 전환을 특징으로 하는 CRM/비즈니스 도구용 구성 요소를 언급합니다. 다크 모드 지원으로 완벽하게 반응합니다.
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>관련 구성 요소
User Mentions 구성 요소
복잡하고 단색의 산업 스타일 사용자는 원자재, 노출된 요소 및 실용적인 미학을 특징으로 하는 여행/관광 웹 사이트의 구성 요소를 언급합니다. 완벽하게 반응하며 다크 모드를 지원합니다.
User Mentions 구성 요소
Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 사용자 언급 구성 요소. JavaScript는 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.
User Mentions 구성 요소
소셜 미디어 네트워킹 인터페이스를 위해 Neumorphism 및 Earth 톤으로 스타일링된 반응형 User Mentions 구성 요소로, 어두운 테마를 지원합니다.