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 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

Composant de l’infobulle du brutalisme

Composant d’infobulle de style brutalisme pour les médias sociaux, avec un schéma de couleurs en niveaux de gris et des éléments interactifs complexes. Il est réactif et prend en charge le mode sombre en utilisant Tailwind CSS, sans JavaScript.

Ouvrir

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.

Ouvrir