CCHub Logo CCHub Tailwind Collection
Komponenten Heatmaps Heatmaps-Komponente

Heatmaps-Komponente

Eine reaktionsschnelle Heatmap-Komponente, die mit Glassmorphism-Effekten entwickelt wurde, mit mattglasähnlichen, durchscheinenden Elementen und Unterstützung für dunkles Design-Styling unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg rounded-xl shadow-lg p-6 md:w-1/2 w-full">
        <h2 class="text-center text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Heat Maps Component</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/200" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/201" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/202" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
            <div class="h-48 rounded-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center overflow-hidden">
                <img src="https://picsum.photos/300/203" alt="Heat map" class="object-cover w-full h-full rounded-lg">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 1</p>
            </div>
            <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <p class="text-gray-800 dark:text-gray-200 font-medium">User 2</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Heatmaps-Komponente

Eine von Entwicklern inspirierte Monospace-Heatmap-Komponente mit Erdtönen, die für Beratung/Dienstleistungen entwickelt wurde. Verfügt über ein gitterartiges Display, das Heatmap-Daten für verschiedene Tage simuliert, auf allen Geräten reaktionsfähig ist und den Dunkelmodus unterstützt.

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 Heatmap-Komponente für Landwirtschafts-/Landwirtschafts-Websites mit einem Retro-/Vintage-Farbschema und Unterstützung für den Dunkelmodus, die unter Berücksichtigung von Mikrointeraktionen entwickelt wurde.

Offen