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 soziale Medien mit Skeuomorphismus-Design, Komplementärfarben und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Heatmaps-Komponente

Eine spielerische und unterhaltsame Heatmap-Komponente für Nachrichten- und Journalismus-Websites mit hellem, fröhlichem Design mit abgerundeten Elementen und freundlicher Ästhetik unter Verwendung eines blauen Farbschemas für Unternehmen. Beinhaltet Unterstützung für Reaktionsfähigkeit und Dunkelmodus.

Offen

Heatmaps-Komponente

Eine reaktionsschnelle Heatmaps-Komponente, die mit Glasmorphismus und einem analogen Farbschema für Social-Media-Schnittstellen entwickelt wurde.

Offen