Composants Infobulle Glassmorphism Monochromatique Simple Infobulle

Glassmorphism Monochromatique Simple Infobulle

Un composant d’info-bulle simple, réactif et compatible avec le mode sombre avec un style Glassmorphism, un schéma de couleurs monochromatiques pour les blogs et les sites de contenu.

Aperçu

HTML Code

<div class="relative flex items-center justify-center">
  <button class="text-gray-800 dark:text-gray-200 focus:outline-none">Hover me</button>
  <div class="absolute bottom-full mb-2 hidden px-3 py-2 text-sm font-semibold text-white bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-md shadow-sm dark:bg-gray-800 dark:bg-opacity-20 dark:backdrop-filter dark:backdrop-blur-lg group-hover:block">Tooltip content</div>
</div>

Composants associés

Composant d’info-bulle

Un composant d’info-bulle réactif avec des micro-interactions pour l’engagement de l’utilisateur, avec un thème sombre et des animations attrayantes.

Ouvrir

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.

Ouvrir

Composant d’info-bulle Micro-interactions

Un composant d’info-bulle simple mais attrayant avec des animations de micro-interaction subtiles, un design réactif et une prise en charge du thème sombre construit avec Tailwind CSS. Aucun JavaScript n’est requis.

Ouvrir