User Mentions 구성 요소
복잡하고 단색의 산업 스타일 사용자는 원자재, 노출된 요소 및 실용적인 미학을 특징으로 하는 여행/관광 웹 사이트의 구성 요소를 언급합니다. 완벽하게 반응하며 다크 모드를 지원합니다.
HTML 코드
<div class="font-sans bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 max-w-4xl mx-auto my-8">
<div class="flex items-center justify-between mb-6 pb-4 border-b border-gray-300 dark:border-gray-600">
<h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 flex items-center">
<svg class="w-7 h-7 sm:w-8 sm:h-8 mr-3 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2H1m16-14v2a3 3 0 01-3 3H8a3 3 0 01-3-3V6m15.75 14H1.25S.5 19 .5 17V3S.5 2 2 2h20s1.5 0 1.5 1v14s0 1-1.5 1zM12 11V6m0 0l3 3m-3-3L9 9"></path>
</svg>
Mentions & Interactions
</h2>
<button class="px-4 py-2 bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300 rounded-md text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
See All
</button>
</div>
<div class="mb-8 space-y-6">
<!-- Mention Item 1 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
<span class="font-semibold text-gray-900 dark:text-gray-100">@john_doe</span> mentioned your recent trip to <span class="font-semibold text-gray-800 dark:text-gray-300">Tokyo, Japan</span>
</p>
<blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
"Absolutely loved your photos from Tokyo! The ramen looked incredible. Any tips on finding the best spots?"
</blockquote>
<div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
2 hours ago
</span>
<div class="space-x-3">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
Reply
</button>
</div>
</div>
</div>
</div>
<!-- Mention Item 2 -->
<div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/55.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
<span class="font-semibold text-gray-900 dark:text-gray-100">@travel_guru</span> tagged you in a post about <span class="font-semibold text-gray-800 dark:text-gray-300">hiking trails in Patagonia</span>
</p>
<blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
"For epic adventures, check out these trails! @your_profile, you'd love the views from Fitz Roy."
</blockquote>
<div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
Yesterday
</span>
<div class="space-x-3">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
Reply
</button>
</div>
</div>
</div>
</div>
<!-- Mention Item 3 (New reply) -->
<div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-200">
<div class="flex-shrink-0 mr-4 mb-3 sm:mb-0">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover" src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar">
</div>
<div class="flex-grow">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">
<span class="font-semibold text-gray-900 dark:text-gray-100">@city_explorer</span> replied to your comment on <span class="font-semibold text-gray-800 dark:text-gray-300">ancient ruins in Rome</span>
</p>
<blockquote class="relative border-l-4 border-gray-300 dark:border-gray-600 pl-4 text-gray-700 dark:text-gray-400 text-sm italic py-1">
"Absolutely! The Colosseum at sunset is unforgettable. Did you visit the Palatine Hill as well?"
</blockquote>
<div class="mt-3 flex items-center text-xs text-gray-500 dark:text-gray-400 justify-between">
<span class="flex items-center">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
5 days ago
</span>
<div class="space-x-3">
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 flex items-center text-sm">
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
</svg>
Reply
</button>
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<button class="px-6 py-3 bg-gray-700 text-gray-100 dark:bg-gray-600 dark:text-gray-200 rounded-md text-lg font-semibold tracking-wide hover:bg-gray-800 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-200">
Load More Mentions
</button>
</div>
</div>관련 구성 요소
User Mentions 구성 요소
대시보드 인터페이스에 적합한 glassmorphism 디자인, 기업 파란색 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 User Mentions 구성 요소입니다.
User Mentions 구성 요소
User Mentions 컴포넌트는 블러 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하는 Glassmorphism 스타일로 디자인되었습니다. 여기에는 어두운 테마 지원이 포함되어 있으며 반응형이므로 전자 상거래 웹 사이트에 적합합니다.