提示组件
一个响应式工具提示组件，设计有微交互、三元色彩方案，并支持专业企业网站的深色模式。它包括引人入胜的动画、一个丰富的界面，具有交互元素，并使用Tailwind CSS进行样式设计。
HTML 代码
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
Hover over me
</button>
</div>
<div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<div class="p-3">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
<div>
<p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
</div>
</div>
<div class="mt-2 text-gray-600 dark:text-gray-300">
<p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
</div>
<div class="mt-2 flex justify-end">
<button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
</div>
</div>
</div>
</div>
<style>
@media (prefers-reduced-motion: no-preference) {
.transition-opacity {
transition: opacity 0.5s ease-in-out;
}
}
</style>