CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente, die mit einer Retro-/Vintage-Ästhetik gestaltet wurde und Unterstützung für dunkle Themen bietet. Es enthält Abschnitte für einen Titel, einen Untertitel und eine Karte mit thermisch hervorgehobenen Bereichen sowie zusätzlichen zufälligen Bildern und Avataren für einen nostalgischen Look.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-2xl mx-auto">
    <h2 class="text-3xl font-bold text-center text-purple-800 dark:text-purple-300 mb-2">Heat Maps Data Visualization</h2>
    <h4 class="text-lg text-center text-gray-600 dark:text-gray-400 mb-6">Exploring trends with a nostalgic vibe!</h4>
    <div class="relative w-full h-64 mb-4 bg-gradient-to-r from-pink-300 via-purple-400 to-blue-500 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Heat Map" class="absolute inset-0 object-cover w-full h-full opacity-80">
        <div class="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-center">
            <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
                <h3 class="text-lg font-semibold text-purple-800 dark:text-purple-300">Active Areas</h3>
                <ul class="mt-2 space-y-2">
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 1: 35%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 2: 50%</span>
                    </li>
                    <li class="flex items-center">
                        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                        <span class="text-gray-800 dark:text-gray-300">User 3: 20%</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <p class="text-center text-gray-600 dark:text-gray-400">Explore the data trends with a touch from the 80s and 90s!</p>
</div>

Verwandte Komponenten

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 Heatmap-Komponente mit minimalistischem Design, responsivem Layout und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten. Verwendet CSS für das Styling im Dunkelmodus.

Offen

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente mit Retro-/Vintage-Ästhetik, die für Blog-/Content-Zwecke entwickelt wurde, mit interaktiven Elementen und Unterstützung für dunkle Themen.

Offen