Infobulle pastel minimaliste
Un composant d’info-bulle minimal et plat conçu pour les sites Web d’entreprise et d’entreprise avec des couleurs pastel, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="relative inline-block">
<button class="text-gray-700 dark:text-gray-300 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-800 px-4 py-2 rounded">Hover me</button>
<div class="invisible absolute z-10 w-32 top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
Tooltip text
</div>
</div>Composants associés
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.
Composant d’info-bulle
Un composant d’info-bulle minimaliste et plat pour les sites Web d’événements/conférences, avec une palette de couleurs noir et blanc avec un accent vif.
Paper_Rainbow_Tooltip_Component
Un composant d’info-bulle simple et réactif avec un design inspiré du papier/de l’impression et un arrière-plan dégradé arc-en-ciel, adapté aux plateformes de forum/communauté. Inclut la prise en charge du mode sombre.