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

Skeuomorphe Tooltip-Komponente

Eine reaktionsschnelle Tooltip-Komponente, die mit Skeuomorphismus und lebendigen Farben entwickelt wurde und sich für Blogs und den Konsum von Inhalten eignet. Es enthält Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Tooltip-Komponente

Eine Tooltip-Komponente im Neumorphism-Stil für die Präsentation von Portfolios mit Unterstützung für den Dunkelmodus, responsivem Design und Verwendung von Tailwind CSS.

Offen

Tooltip-Komponente

Eine einfache, reaktionsschnelle Tooltip-Komponente, die für den Konsum von Blog-Inhalten entwickelt wurde, mit einem 3D-Design mit einem Graustufen-Farbschema und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen