CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Minimalistischer Pastell-Tooltip

Minimalistischer Pastell-Tooltip

Eine minimalistische und flache QuickInfo-Komponente, die für Geschäfts- und Unternehmenswebsites mit Pastellfarben, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau

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>

Verwandte Komponenten

Tooltip-Komponente

Eine responsive Material Design-Tooltip-Komponente mit monochromatischem Farbschema für den E-Commerce mit Unterstützung des Dunkelmodus. Kein JavaScript, HTML und nur Tailwind CSS.

Offen

Microinteractions Tooltip-Komponente

Eine einfache, aber ansprechende Tooltip-Komponente mit subtilen Mikrointeraktionsanimationen, responsivem Design und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurden. Es ist kein JavaScript erforderlich.

Offen

Tooltip-Komponente

Eine minimalistische und flache Design-Tooltip-Komponente für Event-/Konferenz-Websites mit einem Schwarz-Weiß-Farbschema mit einem hellen Akzent.

Offen