CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine Heatmaps-Komponente, die im Brutalismus-Stil mit Erdtönen, moderater Komplexität und responsivem Design mit Unterstützung für dunkle Themen gestaltet wurde.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg">
    <h2 class="text-2xl font-bold mb-4 text-brown-800 dark:text-brown-200">Project Heat Maps</h2>
    <p class="mb-6 text-gray-700 dark:text-gray-300">Showcasing data visualizations through temperature maps in a bold and raw design style.</p>
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=1" alt="Heat Map 1" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 1</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 1, highlighting interesting data points.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=2" alt="Heat Map 2" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 2</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 2, showcasing a different aspect of the data.</p>
        </div>
        <div class="bg-brown-200 dark:bg-brown-700 rounded-lg shadow-md p-4">
            <img src="https://picsum.photos/400/200?random=3" alt="Heat Map 3" class="rounded-lg mb-2">
            <h3 class="font-bold text-lg text-brown-800 dark:text-brown-200">Heat Map 3</h3>
            <p class="text-brown-600 dark:text-brown-300">Description of heat map 3, emphasizing key trends.</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="font-bold text-xl text-brown-800 dark:text-brown-200">Team</h3>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar 1" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar 2" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
            <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar 3" class="w-12 h-12 rounded-full border-2 border-brown-800 dark:border-brown-200">
        </div>
    </div>
</div>

Verwandte Komponenten

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

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.

Offen

Heatmaps-Komponente

Eine reaktionsschnelle Heatmap-Komponente mit einer industriellen, waldgrünen Ästhetik für Social-Media-Schnittstellen, die helle und dunkle Modi unterstützt.

Offen