CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine Heatmaps-Komponente, die in einem brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts unter Verwendung von Tailwind CSS entworfen wurde. Es unterstützt reaktionsschnelle Effekte und ein dunkles Thema.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg">
    <h2 class="text-3xl text-gray-900 dark:text-white font-extrabold mb-4">Heat Maps</h2>
    <div class="grid grid-cols-3 gap-4">
        <div class="relative bg-red-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=1" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">20%</div>
        </div>
        <div class="relative bg-yellow-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=2" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-black font-bold text-lg">50%</div>
        </div>
        <div class="relative bg-green-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=3" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">75%</div>
        </div>
        <div class="relative bg-blue-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=4" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">40%</div>
        </div>
        <div class="relative bg-purple-500 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=5" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">90%</div>
        </div>
        <div class="relative bg-gray-600 h-32 flex flex-col items-center justify-center rounded-lg shadow-lg">
            <img src="https://picsum.photos/200/200?random=6" alt="Random Image" class="absolute inset-0 w-full h-full object-cover opacity-30 rounded-lg">
            <div class="relative z-10 text-white font-bold text-lg">60%</div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-2xl text-gray-900 dark:text-white font-bold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-900 dark:border-white">
        </div>
    </div>
</div>
<div class="hidden dark:block bg-gray-900 h-32 text-center flex items-center justify-center text-white font-bold text-xl">Dark Mode Active</div>

Verwandte Komponenten

Heatmaps-Komponente

Eine einfache, reaktionsschnelle Heatmap-Komponente, die mit einer Retro/Vintage-Ästhetik unter Verwendung eines Pastell-Farbschemas gestaltet wurde und für Dashboards geeignet ist. Es bietet Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Heatmaps-Komponente

Eine reaktionsschnelle Heatmap-Komponente für ein Portfolio, die mit einem dunklen Hintergrund und lebendigen, hochgesättigten Farben gestaltet ist, um die Belastung der Augen zu reduzieren und Energie zu erzeugen. Enthält ein kalenderähnliches Raster zur Visualisierung von Aktivitäten, interaktive QuickInfos (obwohl die Funktionalität nicht gemäß der Regel "Kein JavaScript" implementiert ist, ist ein visueller Platzhalter vorhanden) und eine Farblegende.

Offen

Heatmaps-Komponente

Eine einfache, reaktionsschnelle Heatmaps-Komponente mit einem 3D-Designstil und einem komplementären Farbschema, das für die Präsentation von Arbeiten oder Produkten mit Unterstützung dunkler Themen entwickelt wurde.

Offen