CCHub Logo CCHub Tailwind Collection
Komponenten Quickinfo Skeuomorphe Tooltip-Komponente

Skeuomorphe Tooltip-Komponente

Eine komplexe Tooltip-Komponente mit einem skeuomorphen Stil und Erdtönen, die für E-Commerce-Anwendungen mit Unterstützung des Dunkelmodus geeignet ist.

Vorschau

HTML-Code 

<div class="relative group">
    <img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
    <div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
        <h3 class="text-lg text-earthgreen-200">Product Name</h3>
        <p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
        <div class="flex space-x-2 mt-2">
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
        </div>
    </div>
</div>

Verwandte Komponenten

Quickinfo

Tooltip-Komponente mit 3D-Design, Erdtönen, einfacher Komplexität und Dashboard-Zweck. Reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

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

Glasmorphismus Tooltip

Eine Tooltip-Komponente, die im Glassmorphism-Stil gestaltet wurde und dunkles Design und responsives Design unterstützt und für Social-Media-Schnittstellen geeignet ist.

Offen