User Mentions 구성 요소
복잡하고 반응이 빠른 사용자는 수채화/예술적 스타일, 멋진 중립적인 색 구성표 및 어두운 모드 지원을 갖춘 교육 플랫폼용 구성 요소를 언급합니다. 사용자 아바타, 이름, 역할 및 미묘한 수채화 배경 효과가 특징입니다.
HTML 코드
<div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 min-h-screen">
<!-- Watercolour Background Effect via pseudo-elements and gradients -->
<style>
.watercolor-bg {
position: relative;
overflow: hidden;
}
.watercolor-bg::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 10% 20%, rgba(200, 220, 230, 0.3) 0%, transparent 25%),
radial-gradient(circle at 70% 30%, rgba(200, 210, 220, 0.2) 0%, transparent 30%),
radial-gradient(circle at 30% 80%, rgba(230, 235, 240, 0.4) 0%, transparent 20%),
radial-gradient(circle at 90% 90%, rgba(210, 225, 235, 0.3) 0%, transparent 25%);
background-blend-mode: overlay;
opacity: 0.7;
transform: rotate(15deg);
z-index: -1;
filter: blur(80px);
}
.dark .watercolor-bg::before {
background: radial-gradient(circle at 10% 20%, rgba(60, 70, 80, 0.3) 0%, transparent 25%),
radial-gradient(circle at 70% 30%, rgba(50, 60, 70, 0.2) 0%, transparent 30%),
radial-gradient(circle at 30% 80%, rgba(70, 80, 90, 0.4) 0%, transparent 20%),
radial-gradient(circle at 90% 90%, rgba(60, 75, 85, 0.3) 0%, transparent 25%);
}
</style>
<div class="max-w-4xl mx-auto rounded-3xl overflow-hidden
bg-gradient-to-br from-white to-stone-50 dark:from-stone-800 dark:to-stone-900
shadow-xl dark:shadow-stone-700/30 border border-stone-200 dark:border-stone-700
watercolor-bg relative p-6 sm:p-8 md:p-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 sm:mb-8 text-center">
Mentions & Collaborators
</h2>
<p class="text-center text-stone-600 dark:text-stone-300 mb-8 sm:mb-10 text-lg">
Engage with fellow learners and instructors by mentioning them in your discussions.
</p>
<!-- Search/Filter Input -->
<div class="mb-8 sm:mb-10 relative">
<input type="text" placeholder="Search users or roles..." class="w-full p-3 sm:p-4 pl-12 rounded-xl
bg-stone-100 dark:bg-stone-700
border border-stone-300 dark:border-stone-600
text-stone-800 dark:text-stone-50
placeholder-stone-500 dark:placeholder-stone-400
focus:ring-2 focus:ring-blue-400 focus:border-transparent
transition duration-200 ease-in-out">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- User List Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- User Card 1 -->
<div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl
bg-stone-50 dark:bg-stone-800
shadow-md dark:shadow-stone-900/20
border border-stone-200 dark:border-stone-700
hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Wonderland avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-blue-300 dark:ring-blue-600/70 p-0.5">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Alice Wonderland</h3>
<p class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-3">Lead Instructor</p>
<p class="text-center text-stone-600 dark:text-stone-300 text-sm">Specializes in Advanced Algebra.</p>
<button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Mention User
</button>
</div>
<!-- User Card 2 -->
<div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl
bg-stone-50 dark:bg-stone-800
shadow-md dark:shadow-stone-900/20
border border-stone-200 dark:border-stone-700
hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Bob The Builder avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-purple-600/70 p-0.5">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Bob The Builder</h3>
<p class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-3">Student Helper</p>
<p class="text-center text-stone-600 dark:text-stone-300 text-sm">Experienced in Geometry.</p>
<button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Mention User
</button>
</div>
<!-- User Card 3 -->
<div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl
bg-stone-50 dark:bg-stone-800
shadow-md dark:shadow-stone-900/20
border border-stone-200 dark:border-stone-700
hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Charlie Chaplin avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-green-300 dark:ring-green-600/70 p-0.5">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Charlie Chaplin</h3>
<p class="text-green-600 dark:text-green-400 text-sm font-medium mb-3">Course Administrator</p>
<p class="text-center text-stone-600 dark:text-stone-300 text-sm">Manages course registrations.</p>
<button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Mention User
</button>
</div>
<!-- User Card 4 -->
<div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl
bg-stone-50 dark:bg-stone-800
shadow-md dark:shadow-stone-900/20
border border-stone-200 dark:border-stone-700
hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="David Copperfield avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-indigo-600/70 p-0.5">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">David Copperfield</h3>
<p class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-3">Teaching Assistant</p>
<p class="text-center text-stone-600 dark:text-stone-300 text-sm">Aids with Calculus problems.</p>
<button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Mention User
</button>
</div>
<!-- User Card 5 -->
<div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl
bg-stone-50 dark:bg-stone-800
shadow-md dark:shadow-stone-900/20
border border-stone-200 dark:border-stone-700
hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Eve Harrington avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-pink-300 dark:ring-pink-600/70 p-0.5">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Eve Harrington</h3>
<p class="text-pink-600 dark:text-pink-400 text-sm font-medium mb-3">Instructor</p>
<p class="text-center text-stone-600 dark:text-stone-300 text-sm">Teaches Discrete Mathematics.</p>
<button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Mention User
</button>
</div>
<!-- User Card 6 -->
<div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl
bg-stone-50 dark:bg-stone-800
shadow-md dark:shadow-stone-900/20
border border-stone-200 dark:border-stone-700
hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/24.jpg" alt="Frankenstein avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-orange-300 dark:ring-orange-600/70 p-0.5">
<h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Frankenstein</h3>
<p class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-3">Student</p>
<p class="text-center text-stone-600 dark:text-stone-300 text-sm">Learning Python Programming.</p>
<button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
Mention User
</button>
</div>
</div>
<!-- Pagination/Load More (Placeholder) -->
<div class="mt-10 flex justify-center">
<button class="px-6 py-3 rounded-full bg-blue-500 text-white text-lg font-medium
hover:bg-blue-600 transition duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800
shadow-lg hover:shadow-xl">
Load More Users
</button>
</div>
</div>
</div>관련 구성 요소
User Mentions 구성 요소
뉴모피즘(Neumorphism) 스타일의 사용자는 반응형 디자인과 다크 모드를 지원하는 포트폴리오 웹사이트에 어스 톤을 사용하는 컴포넌트를 언급합니다.
User Mentions 구성 요소
단순하고 미니멀한 사용자는 다크 모드를 지원하는 구성 요소를 언급합니다. 클릭 가능한 사용자 아바타 및 이름은 플랙스박스 레이아웃에 표시됩니다. 구성 요소는 반응형이며 다양한 화면 크기에 맞게 조정됩니다.
User Mentions 구성 요소
Tailwind CSS를 사용하여 구축된 반응형 효과 및 어두운 테마 지원을 특징으로 하는 마이크로 인터랙션으로 설계된 User Mentions 구성 요소입니다.