Graphiques

Composant Graphiques

Un composant de tableau de bord réactif démontrant un design skeuomorphe avec des couleurs pastel et la prise en charge du mode sombre, avec des graphiques à barres simulés, des graphiques linéaires et des indicateurs de performance clés utilisant du HTML pur et du CSS Tailwind. Aucun JavaScript n’est inclus ; Les graphiques sont des représentations visuelles.

Ouvrir l’aperçu

                <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>

Composant Graphiques

Un composant de graphiques de style brutaliste pour les sites Web d’entreprise, avec une palette de couleurs triadique et une complexité modérée. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <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>

Composant Graphiques

Un composant de graphiques réactif conçu selon les principes de la conception matérielle, avec une palette de couleurs pastel et une interactivité complexe pour présenter des portefeuilles. Il inclut la prise en charge du mode sombre avec les classes CSS Tailwind.

Ouvrir l’aperçu

                <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>

Composant Graphiques

Un composant de graphiques réactifs conçu dans le style skeuomorphism avec une palette de couleurs en niveaux de gris et une prise en charge du mode sombre, idéal pour les applications de commerce électronique.

Ouvrir l’aperçu

                <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>

Tableau des ventes de Glassmorphism

Un composant graphique simple et réactif avec un style Glassmorphism, une palette de couleurs vives et une prise en charge du mode sombre, adapté aux tableaux de bord de commerce électronique.

Ouvrir l’aperçu

                <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

Un composant simple de graphique Glassmorphism avec des couleurs vives, adapté aux blogs et aux sites de contenu. Le composant est réactif et inclut la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <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

Composant de graphiques skeuomorphes pour les médias sociaux avec des couleurs complémentaires

Ouvrir l’aperçu

                <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>

Composant Graphiques de skeuomorphisme

Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.

Ouvrir l’aperçu

                <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>

Composant Graphiques

Un composant de graphiques complexe conçu pour les sites Web d’entreprise et d’entreprise, avec une conception 3D, une palette de couleurs complémentaire et une structure réactive avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <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>

Composant Graphiques

Composant de graphiques complexe conçu pour les applications Web de commerce électronique en mode sombre avec une palette de couleurs en niveaux de gris. Ce composant comprend plusieurs éléments interactifs tels que des graphiques, des points de données, des info-bulles et des boutons, avec une conception réactive à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <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>

Catégories