User Mentions 组件
一个简单、干净且响应迅速的用户提及组件,具有鲜艳的配色方案,采用瑞士/国际排版风格设计,供作品集使用。包括深色模式支持。
HTML 代码
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border-t-4 border-indigo-600 dark:border-indigo-500">
<div class="p-4 sm:p-6 pb-2 sm:pb-2 md:p-8 md:pb-4 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl sm:text-3xl md:text-3xl lg:text-3xl font-extrabold text-gray-900 dark:text-white mb-1 sm:mb-2 leading-tight tracking-tight">
Mentions
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">
People talking about you.
</p>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<!-- Mention Item 1 -->
<div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-0.5">
<p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
John Doe
<span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium ml-1">@johndoe</span>
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
"This project's design is <span class="font-semibold text-indigo-700 dark:text-indigo-300">outstanding</span>! Really impressed by the attention to detail."
</p>
</div>
</div>
<!-- Mention Item 2 -->
<div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-0.5">
<p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
Jane Smith
<span class="text-xs text-purple-600 dark:text-purple-400 font-medium ml-1">@janesmithy</span>
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
"Just saw the new <span class="font-semibold text-purple-700 dark:text-purple-300">case study</span>, incredibly insightful. Great work!"
</p>
</div>
</div>
<!-- Mention Item 3 -->
<div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-pink-400" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
<div class="flex-1">
<div class="flex items-center justify-between mb-0.5">
<p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
Michael B.
<span class="text-xs text-pink-600 dark:text-pink-400 font-medium ml-1">@mikeyb_design</span>
</p>
<span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
</div>
<p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
"Their portfolio sets a new standard. The <span class="font-semibold text-pink-700 dark:text-pink-300">UX flow</span> is seamless and intuitive."
</p>
</div>
</div>
</div>
<div class="p-4 sm:p-6 pt-2 sm:pt-2 md:p-8 md:pt-4 text-center">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md text-indigo-700 dark:text-indigo-200 bg-indigo-100 dark:bg-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
View All Mentions
<svg class="ml-2 -mr-0.5 w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>