Charts

Charts-Komponente

Eine reaktionsschnelle Dashboard-Komponente, die ein skeuomorphes Design mit Pastellfarben und Unterstützung für den Dunkelmodus demonstriert, mit simulierten Balkendiagrammen, Liniendiagrammen und wichtigen Leistungsindikatoren unter Verwendung von reinem HTML und Tailwind CSS. Es ist kein JavaScript enthalten; Diagramme sind visuelle Darstellungen.

Vorschau öffnen

                <div class="min-h-screen p-4 sm:p-8
    bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
    font-sans text-gray-800 dark:text-gray-200">

    <div class="max-w-7xl mx-auto">
        <!-- Dashboard Header -->
        <header class="mb-8 p-6 rounded-xl relative
            bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
            shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
            border border-gray-100 dark:border-gray-700
            text-center
        ">
            <h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
                Analytics Dashboard
            </h1>
            <p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
                Data insights at a glance with a Classic UI
            </p>
        </header>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

            <!-- Card 1: Sales Overview (Bar Chart) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
                overflow-hidden
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>

                <!-- Timeframe buttons (skeuomorphic) -->
                <div class="flex space-x-2 mb-6">
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Daily</button>
                    <button class="
                        px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
                        bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
                        text-gray-700 dark:text-gray-300
                        shadow-sm shadow-gray-200 dark:shadow-gray-900
                        border border-gray-200 dark:border-gray-700
                        hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
                        active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
                        active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
                    ">Monthly</button>
                </div>

                <!-- Chart Area - Recessed look -->
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative flex items-end justify-around space-x-2
                ">
                    <!-- Example Bar Chart bars -->
                    <div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
                    <div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
                </div>

                <!-- Legend -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
                    </div>
                </div>
            </div>

            <!-- Card 2: User Engagement (Simulated Line Chart) -->
             <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    relative
                ">
                    <!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
                    <div class="absolute inset-0 flex items-end">
                        <div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
                            style="
                                clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
                            "></div>
                    </div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
                    <div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
                </div>
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
                    </div>
                </div>
            </div>

            <!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
            <div class="
                relative rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
                <div class="
                    min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    flex items-center justify-center
                ">
                    <!-- Simple Circle Placeholder for Pie Chart -->
                    <div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
                        bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
                    ">
                        <div class="text-center">
                            <p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
                            <p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
                        </div>
                    </div>
                </div>
                <!-- Legend for segments -->
                <div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
                    </div>
                    <div class="flex items-center">
                        <span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
                    </div>
                </div>
            </div>

            <!-- Card 4: Key Performance Indicators -->
            <div class="
                relative col-span-1 md:col-span-2 lg:col-span-3
                rounded-lg p-4 sm:p-6
                bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
                border border-gray-200 dark:border-gray-700
            ">
                <h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
                <div class="
                    min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
                    rounded-md
                    bg-gray-100 dark:bg-gray-800
                    shadow-inner shadow-gray-300 dark:shadow-gray-900
                    border border-gray-300 dark:border-gray-700
                    grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
                ">
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
                        <p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
                        <p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
                        <p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

Charts-Komponente

Eine Diagrammkomponente im brutalistischen Stil für Unternehmenswebsites mit einem triadischen Farbschema und moderater Komplexität. Es beinhaltet Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Vorschau öffnen

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6 mb-8">
      <h2 class="text-3xl font-black text-black dark:text-white mb-4 uppercase">Sales Performance</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Chart 1 -->
        <div class="border-4 border-black dark:border-white p-4 bg-red-400 dark:bg-red-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Quarterly Revenue</h3>
          <div class="h-48 bg-black dark:bg-white flex items-end overflow-hidden">
            <div class="w-1/4 h-3/4 bg-yellow-400 dark:bg-yellow-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-1/2 bg-blue-400 dark:bg-blue-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-5/6 bg-orange-400 dark:bg-orange-500 border-r-2 border-black"></div>
            <div class="w-1/4 h-2/3 bg-green-400 dark:bg-green-500"></div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span>
          </div>
        </div>

        <!-- Chart 2 -->
        <div class="border-4 border-black dark:border-white p-4 bg-yellow-400 dark:bg-yellow-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Market Share</h3>
          <div class="h-48 bg-black dark:bg-white flex items-center justify-center relative">
            <div class="absolute w-32 h-32 rounded-full bg-blue-400 dark:bg-blue-500 border-4 border-black dark:border-white z-10"></div>
            <div class="absolute w-24 h-24 rounded-full bg-red-400 dark:bg-red-500 z-20"></div>
            <div class="absolute w-16 h-16 rounded-full bg-green-400 dark:bg-green-500 z-30"></div>
            <div class="absolute w-8 h-8 rounded-full bg-purple-400 dark:bg-purple-500 z-40"></div>
          </div>
          <div class="flex justify-around text-black dark:text-white mt-2 text-sm font-bold">
            <span>A (40%)</span><span>B (25%)</span><span>C (20%)</span><span>D (15%)</span>
          </div>
        </div>

        <!-- Chart 3 -->
        <div class="border-4 border-black dark:border-white p-4 bg-blue-400 dark:bg-blue-700 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">
          <h3 class="text-xl font-bold text-black dark:text-white mb-2">Customer Growth</h3>
          <div class="h-48 bg-black dark:bg-white flex flex-col justify-end p-2">
            <div class="flex items-end h-full">
              <div class="w-1/5 h-1/4 bg-orange-400 dark:bg-orange-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/2 bg-cyan-400 dark:bg-cyan-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-3/4 bg-lime-400 dark:bg-lime-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-2/3 bg-pink-400 dark:bg-pink-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
              <div class="w-1/5 h-1/3 bg-purple-400 dark:bg-purple-500 border-2 border-r-0 border-b-0 border-black dark:border-white"></div>
            </div>
          </div>
          <div class="flex justify-between text-black dark:text-white mt-2 text-sm font-bold">
            <span>2019</span><span>2020</span><span>2021</span><span>2022</span><span>2023</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Additional Section for more data or controls -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] p-6">
      <h3 class="text-2xl font-black text-black dark:text-white mb-4 uppercase">Key Metrics</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
        <div class="border-2 border-black dark:border-white p-4 bg-green-400 dark:bg-green-700 text-black dark:text-white font-bold">
          <p class="text-4xl">1.2M</p>
          <p>Total Sales</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-purple-400 dark:bg-purple-700 text-black dark:text-white font-bold">
          <p class="text-4xl">15%</p>
          <p>Growth Rate</p>
        </div>
        <div class="border-2 border-black dark:border-white p-4 bg-orange-400 dark:bg-orange-700 text-black dark:text-white font-bold">
          <p class="text-4xl">£250K</p>
          <p>Net Profit</p>
        </div>
      </div>
    </div>
  </div>
</div>

Charts-Komponente

Eine reaktionsschnelle Charts-Komponente, die nach den Prinzipien des Materialdesigns entwickelt wurde und ein pastellfarbenes Farbschema und komplexe Interaktivität für die Präsentation von Portfolios bietet. Es enthält Unterstützung für den Dunkelmodus mit Tailwind-CSS-Klassen.

Vorschau öffnen

                <div class="p-6 max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Portfolio Charts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-pink-100 dark:bg-pink-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Sales Overview</h3>
            <img src="https://picsum.photos/400/200" alt="Sales Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-blue-100 dark:bg-blue-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Engagement</h3>
            <img src="https://picsum.photos/400/200?random=1" alt="Engagement Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-green-100 dark:bg-green-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Traffic Sources</h3>
            <img src="https://picsum.photos/400/200?random=2" alt="Traffic Sources Chart" class="rounded-lg shadow-md">
        </div>
        <div class="bg-yellow-100 dark:bg-yellow-900 rounded-lg shadow-lg p-4">
            <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Customer Feedback</h3>
            <img src="https://picsum.photos/400/200?random=3" alt="Feedback Chart" class="rounded-lg shadow-md">
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Team Members</h3>
        <div class="flex flex-wrap mt-4 gap-4">
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Jane Smith</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Alex Johnson</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-4 flex items-center">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-md mr-2">
                <p class="text-gray-800 dark:text-gray-200">Emily Davis</p>
            </div>
        </div>
    </div>
</div>

Charts-Komponente

Eine reaktionsschnelle Diagrammkomponente im Skeuomorphismus-Stil mit einem Graustufen-Farbschema und Unterstützung für den Dunkelmodus, ideal für E-Commerce-Anwendungen.

Vorschau öffnen

                <div class="max-w-2xl mx-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Sales Data</h2>
    <div class="flex justify-between">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item A</h3>
            <img src="https://picsum.photos/200/100?random=1" alt="Item A" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 150</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-3/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item B</h3>
            <img src="https://picsum.photos/200/100?random=2" alt="Item B" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 120</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-2/4"></div>
            </div>
        </div>
    </div>
    <div class="flex justify-between mt-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 mr-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item C</h3>
            <img src="https://picsum.photos/200/100?random=3" alt="Item C" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 100</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/4"></div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow p-4 flex-1 ml-4">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Item D</h3>
            <img src="https://picsum.photos/200/100?random=4" alt="Item D" class="w-full rounded-md">
            <p class="mt-2 text-gray-600 dark:text-gray-400">Sales: 80</p>
            <div class="h-2 bg-gray-300 dark:bg-gray-700 w-3/4 mt-2 rounded-full">
                <div class="h-2 bg-blue-500 rounded-full w-1/5"></div>
            </div>
        </div>
    </div>
</div>

Verkaufsdiagramm für Glasmorphismus

Eine einfache, reaktionsschnelle Diagrammkomponente mit einem Glassmorphism-Stil, einem lebendigen Farbschema und Unterstützung für den Dunkelmodus, die für E-Commerce-Dashboards geeignet ist.

Vorschau öffnen

                <div class="p-4 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg dark:bg-gray-800 dark:bg-opacity-30">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h3>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Weekly Sales</p>
      <p class="text-2xl font-bold text-purple-600 dark:text-purple-400">$5,200</p>
    </div>
    <div class="text-center">
      <p class="text-sm text-gray-600 dark:text-gray-300">Monthly Sales</p>
      <p class="text-2xl font-bold text-teal-600 dark:text-teal-400">$18,500</p>
    </div>
  </div>
  <div class="mt-6">
    <div class="h-32 bg-gradient-to-r from-purple-400 to-teal-400 rounded-lg dark:from-purple-600 dark:to-teal-600"></div>
  </div>
</div>

VibrantGlassmorphismChart

Eine einfache Glassmorphism-Diagrammkomponente mit leuchtenden Farben, die für Blogs und Content-Websites geeignet ist. Die Komponente ist reaktionsschnell und bietet Unterstützung für dunkle Designs mit Tailwind CSS.

Vorschau öffnen

                <div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

SkeuomorphismChartsComponent

Skeuomorphe Diagrammkomponente für Social Media mit Komplementärfarben

Vorschau öffnen

                <div class="p-6 bg-gradient-to-br from-gray-200 to-gray-300 rounded-lg shadow-xl dark:from-gray-700 dark:to-gray-800">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Activity Chart</h2>
  <div class="relative h-48">
    <canvas id="myChart" class="w-full h-full"></canvas>
    </div>
    <div class="flex justify-around mt-4 text-gray-600 dark:text-gray-300 text-sm">
    <span>Likes</span>
    <span>Comments</span>
    <span>Shares</span>
    <span>Views</span>
    </div>
    </div>

Komponente "Skeuomorphismus-Diagramme"

Eine reaktionsschnelle Diagrammkomponente mit Skeuomorphismus-Stil, lebendigen Farben und Unterstützung des Dunkelmodus für Social-Media-Schnittstellen.

Vorschau öffnen

                <div class="container mx-auto p-4 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Community Engagement</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Likes</h3>
                <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">12,345</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1m0 9h.01"></path>
                    </svg>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Comments</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">5,678</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55a1 1 0 01-1.415 0L9 16z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Shares</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">3,210</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.693c-.095.327-.119.65-.073.973.059.416.213.808.46 1.141.28.353.603.676.968.968q.333.247.666.46a2.42 2.42 0 001.141.46c.323.046.646.022.973-.073l.447-.109a1.902 1.902 0 001.058-.582A1 1 0 0117 16v-4a1 1 0 011-1h2a1 1 0 011 1v-1a1 1 0 00-1-1h-3a1 1 0 01-1-1V9a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 01-1 1h-.086z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-red-400 to-red-600 dark:from-red-600 dark:to-red-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Views</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">45,678</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Charts-Komponente

Eine komplexe Diagrammkomponente, die für Geschäfts- und Unternehmenswebsites entwickelt wurde und ein 3D-Design, ein komplementäres Farbschema und eine reaktionsschnelle Struktur mit Unterstützung für den Dunkelmodus bietet.

Vorschau öffnen

                <div class="flex flex-col justify-center items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full md:w-3/4 lg:w-3/5">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Business Performance Overview</h2>
    <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full">
        <div class="flex-initial w-full bg-blue-500 dark:bg-blue-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Sales Chart</h3>
            <img src="https://picsum.photos/300/200?random=1" alt="Sales Chart" class="rounded-md shadow-lg" />
        </div>
        <div class="flex-initial w-full bg-green-500 dark:bg-green-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Revenue Chart</h3>
            <img src="https://picsum.photos/300/200?random=2" alt="Revenue Chart" class="rounded-md shadow-lg" />
        </div>
    </div>
    <div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 w-full mt-4">
        <div class="flex-initial w-full bg-purple-500 dark:bg-purple-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Customer Feedback</h3>
            <img src="https://picsum.photos/300/200?random=3" alt="Customer Feedback" class="rounded-md shadow-lg" />
        </div>
        <div class="flex-initial w-full bg-orange-500 dark:bg-orange-600 p-4 rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
            <h3 class="text-xl font-semibold text-white mb-2">Market Analysis</h3>
            <img src="https://picsum.photos/300/200?random=4" alt="Market Analysis" class="rounded-md shadow-lg" />
        </div>
    </div>
    <div class="flex justify-between items-center mt-6 w-full">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
        <div class="ml-3">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Analyst: John Doe</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400">Data Analyst, 5 years experience</p>
        </div>
    </div>
</div>

Charts-Komponente

Eine komplexe Diagrammkomponente, die für E-Commerce-Webanwendungen im Dunkelmodus mit einem Graustufen-Farbschema entwickelt wurde. Diese Komponente enthält mehrere interaktive Elemente wie Diagramme, Datenpunkte, QuickInfo und Schaltflächen mit responsivem Design mit Tailwind CSS.

Vorschau öffnen

                <div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Sales Chart</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg">Last 30 Days</span>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Weekly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Monthly</button>
        <button class="bg-gray-700 hover:bg-gray-600 text-gray-100 py-1 px-3 rounded">Yearly</button>
    </div>
    <div class="relative">
        <img src="https://picsum.photos/600/300" alt="Sales Chart" class="w-full rounded-lg">
        <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-gray-800 bg-opacity-50 rounded-lg">
            <span class="text-xl font-semibold">$23,000</span>
            <span class="text-sm">Total Sales</span>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-around text-sm text-gray-400">
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 1</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 2</span>
            </div>
            <div class="text-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mb-2">
                <span>User 3</span>
            </div>
        </div>
    </div>
</div>

Kategorien