Composant d’info-bulle
Un composant d’info-bulle réactif conçu avec des micro-interactions, une palette de couleurs triadique et prend en charge le mode sombre pour les sites Web professionnels. Il comprend des animations attrayantes, une interface riche avec des éléments interactifs et utilise Tailwind CSS pour le style.
HTML Code
<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>Composants associés
Infobulle minimaliste
Un composant d’info-bulle de conception minimaliste et plat pour les sites Web de blog/contenu, avec une palette de couleurs monochromatiques et une mise en page simple. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
Minimalist_Tooltip
Composant d’info-bulle de conception minimaliste/plate pour le commerce électronique avec un design réactif et une prise en charge du thème sombre. Utilise une palette de couleurs complémentaire et a une complexité modérée.
Composant d’info-bulle neumorphe
Un composant d’info-bulle sophistiqué de style Neumorphisme adapté aux sites Web d’entreprise, utilisant des couleurs vives et conçu pour la prise en charge du mode sombre.