Rechercher des composants

Catégories

Composants Composants de visualisation de données

Composants de visualisation de données

Composants qui visualisent les données au format graphique

Composant de visualisation des données en mode sombre

Un composant de visualisation de données complexe et réactif conçu avec un thème monochrome sombre. Dispose de plusieurs éléments de visualisation interactifs, notamment un graphique linéaire, un graphique à barres et des cartes de données. Comprend des effets de vol stationnaire et utilise la prise en charge du mode sombre de Tailwind. Convient aux blogs et aux plateformes de consommation de contenu.

Ouvrir Aperçu

                <!-- Dark Mode Data Visualization Component -->
<div class="w-full bg-gray-900 text-gray-100 p-4 md:p-6 rounded-xl shadow-xl">
  <!-- Header with title and filter options -->
  <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
    <div>
      <h2 class="text-2xl font-bold text-gray-100">Analytics Dashboard</h2>
      <p class="text-gray-400 mt-1">Performance metrics for last quarter</p>
    </div>
    
    <div class="mt-4 md:mt-0 flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Daily
      </button>
      <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-indigo-500">
        Weekly
      </button>
      <button class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 rounded-lg transition-colors duration-200 focus:ring-2 focus:ring-gray-500">
        Monthly
      </button>
    </div>
  </div>
  
  <!-- Stats Summary Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <!-- Pageviews -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Pageviews</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+24%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">152.4K</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 75%"></div>
      </div>
    </div>
    
    <!-- Bounce Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Bounce Rate</h3>
        <span class="bg-red-900/30 text-red-400 text-xs py-1 px-2 rounded-full">+2.1%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">38.2%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 38%"></div>
      </div>
    </div>
    
    <!-- Avg. Time on Site -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Avg. Session</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+12%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">4m 38s</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 65%"></div>
      </div>
    </div>
    
    <!-- Conversion Rate -->
    <div class="bg-gray-800 p-4 rounded-lg hover:bg-gray-750 transition-colors duration-200">
      <div class="flex items-center justify-between">
        <h3 class="text-gray-400 text-sm font-medium">Conversion</h3>
        <span class="bg-green-900/30 text-green-400 text-xs py-1 px-2 rounded-full">+7.3%</span>
      </div>
      <p class="text-2xl font-bold mt-2 text-gray-100">5.4%</p>
      <div class="mt-2 h-1 w-full bg-gray-700 rounded-full overflow-hidden">
        <div class="h-1 bg-indigo-500 rounded-full" style="width: 54%"></div>
      </div>
    </div>
  </div>
  
  <!-- Charts Section -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <!-- Line Chart -->
    <div class="bg-gray-800 p-4 rounded-lg col-span-2">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">User Growth</h3>
        <div class="flex space-x-2">
          <span class="inline-block w-3 h-3 bg-indigo-500 rounded-full"></span>
          <span class="text-sm text-gray-400">New Users</span>
          <span class="inline-block w-3 h-3 bg-gray-500 rounded-full ml-2"></span>
          <span class="text-sm text-gray-400">Returning</span>
        </div>
      </div>
      
      <!-- Simplified Line Chart (CSS only) -->
      <div class="relative h-64 w-full">
        <div class="absolute bottom-0 left-0 w-full h-px bg-gray-700"></div>
        <div class="absolute left-0 top-0 h-full w-px bg-gray-700"></div>
        
        <!-- Y-axis labels -->
        <div class="absolute -left-6 top-0 text-gray-400 text-xs">100%</div>
        <div class="absolute -left-6 top-1/4 text-gray-400 text-xs">75%</div>
        <div class="absolute -left-6 top-2/4 text-gray-400 text-xs">50%</div>
        <div class="absolute -left-6 top-3/4 text-gray-400 text-xs">25%</div>
        <div class="absolute -left-6 bottom-0 text-gray-400 text-xs">0%</div>
        
        <!-- X-axis labels -->
        <div class="absolute bottom-[-20px] left-[12.5%] text-gray-400 text-xs">Jan</div>
        <div class="absolute bottom-[-20px] left-[37.5%] text-gray-400 text-xs">Feb</div>
        <div class="absolute bottom-[-20px] left-[62.5%] text-gray-400 text-xs">Mar</div>
        <div class="absolute bottom-[-20px] left-[87.5%] text-gray-400 text-xs">Apr</div>
        
        <!-- Line chart shape (CSS only approximation) -->
        <div class="absolute bottom-0 left-0 w-full h-full overflow-hidden">
          <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
            <!-- Grid lines -->
            <line x1="0" y1="15" x2="100" y2="15" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="30" x2="100" y2="30" stroke="#374151" stroke-width="0.2"/>
            <line x1="0" y1="45" x2="100" y2="45" stroke="#374151" stroke-width="0.2"/>
            <line x1="25" y1="0" x2="25" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="50" y1="0" x2="50" y2="60" stroke="#374151" stroke-width="0.2"/>
            <line x1="75" y1="0" x2="75" y2="60" stroke="#374151" stroke-width="0.2"/>
            
            <!-- Chart line 1 -->
            <polyline 
              points="0,40 25,30 50,20 75,15 100,10"
              fill="none"
              stroke="#6366F1"
              stroke-width="2"
            />
            
            <!-- Chart line 2 -->
            <polyline 
              points="0,50 25,40 50,45 75,35 100,30"
              fill="none"
              stroke="#9CA3AF"
              stroke-width="2"
            />
            
            <!-- Data points for line 1 -->
            <circle cx="0" cy="40" r="1.5" fill="#6366F1"/>
            <circle cx="25" cy="30" r="1.5" fill="#6366F1"/>
            <circle cx="50" cy="20" r="1.5" fill="#6366F1"/>
            <circle cx="75" cy="15" r="1.5" fill="#6366F1"/>
            <circle cx="100" cy="10" r="1.5" fill="#6366F1"/>
            
            <!-- Data points for line 2 -->
            <circle cx="0" cy="50" r="1.5" fill="#9CA3AF"/>
            <circle cx="25" cy="40" r="1.5" fill="#9CA3AF"/>
            <circle cx="50" cy="45" r="1.5" fill="#9CA3AF"/>
            <circle cx="75" cy="35" r="1.5" fill="#9CA3AF"/>
            <circle cx="100" cy="30" r="1.5" fill="#9CA3AF"/>
          </svg>
        </div>
      </div>
    </div>
    
    <!-- Bar Chart -->
    <div class="bg-gray-800 p-4 rounded-lg">
      <div class="flex justify-between items-center mb-4">
        <h3 class="font-semibold text-gray-100">Traffic Sources</h3>
        <button class="text-gray-400 hover:text-gray-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
          </svg>
        </button>
      </div>
      
      <!-- Simplified Bar Chart (CSS only) -->
      <div class="relative h-64 mt-4 flex items-end justify-around">
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 65%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Direct</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 85%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Social</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 40%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Email</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 95%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Search</span>
        </div>
        
        <div class="flex flex-col items-center space-y-2">
          <div class="w-8 bg-indigo-900 hover:bg-indigo-700 transition-colors duration-200 rounded-t-sm" style="height: 50%">
            <div class="w-full bg-indigo-500 h-full rounded-t-sm"></div>
          </div>
          <span class="text-xs text-gray-400">Ads</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Popular Content Section -->
  <div class="bg-gray-800 p-4 rounded-lg mb-6">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-semibold text-gray-100">Popular Content</h3>
      <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-gray-200 rounded-md text-sm transition-colors duration-200">View All</button>
    </div>
    
    <!-- Content Items -->
    <div class="space-y-4">
      <!-- Item 1 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/1/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">10 Ways to Improve Your Data Analysis Skills</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>2.1K reads</span>
            <span class="mx-2">•</span>
            <span>8 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 80%"></div>
              </div>
              <span class="ml-1 text-xs">80%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/26/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Understanding User Behavior Through Analytics</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>1.8K reads</span>
            <span class="mx-2">•</span>
            <span>6 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 65%"></div>
              </div>
              <span class="ml-1 text-xs">65%</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="flex flex-col sm:flex-row bg-gray-750 hover:bg-gray-700 p-3 rounded-lg transition-colors duration-200">
        <img src="https://picsum.photos/id/60/80/80" alt="Article thumbnail" class="w-full sm:w-20 h-20 object-cover rounded-md">
        <div class="mt-2 sm:mt-0 sm:ml-3 flex-grow">
          <h4 class="font-medium text-gray-100">Data Visualization Principles for Beginners</h4>
          <div class="flex items-center text-gray-400 mt-2 text-sm">
            <span>3.4K reads</span>
            <span class="mx-2">•</span>
            <span>12 min read</span>
            <div class="flex ml-auto">
              <div class="w-16 bg-gray-700 rounded-full h-1.5">
                <div class="bg-indigo-500 h-1.5 rounded-full" style="width: 92%"></div>
              </div>
              <span class="ml-1 text-xs">92%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Footer with user info -->
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 rounded-full">
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-100">Report generated by James Wilson</p>
        <p class="text-xs text-gray-400">Last updated: April 15, 2023 at 14:30</p>
      </div>
    </div>
    <div class="mt-4 md:mt-0 flex space-x-2">
      <button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        Download PDF
      </button>
      <button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-md text-sm transition-colors duration-200 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
          <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z" />
        </svg>
        Share Report
      </button>
    </div>
  </div>
</div>

Composant Composants de visualisation de données

Composant de visualisation de données Glassmorphism pour blog/contenu

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 min-h-screen flex items-center justify-center">
    <div class="max-w-7xl w-full mx-auto">
        <div class="glass rounded-xl p-8 md:p-12 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
            <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Site Traffic Overview</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <!-- Traffic Source Breakdown -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Traffic Source Breakdown</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Pie Chart -->
                        <div class="w-32 h-32 rounded-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 animate-pulse"></div>
                    </div>
                    <ul class="mt-4 space-y-2 text-gray-800 dark:text-gray-200">
                        <li>Direct: <span class="font-semibold">35%</span></li>
                        <li>Search Engines: <span class="font-semibold">45%</span></li>
                        <li>Referral: <span class="font-semibold">15%</span></li>
                        <li>Social Media: <span class="font-semibold">5%</span></li>
                    </ul>
                </div>

                <!-- Page Views Over Time -->
                <div class="glass rounded-xl p-6 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Page Views Over Time</h3>
                    <div class="h-48 flex items-center justify-center">
                        <!-- Placeholder for Line Chart -->
                        <div class="w-full h-32 bg-gradient-to-r from-green-500 via-yellow-500 to-red-500 animate-pulse"></div>
                    </div>
                    <div class="mt-4 text-center text-gray-800 dark:text-gray-200">
                        Daily Average: <span class="font-semibold">1,200</span>
                    </div>
                </div>
            </div>

            <!-- Popular Articles -->
            <div class="glass rounded-xl p-6 md:p-8 mt-8 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Popular Articles</h3>
                <div class="space-y-4">

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=1" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">How to Master Tailwind CSS</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">5,400</span></p>
                        </div>
                    </div>

                    <div class="flex items-center glass rounded-xl p-4 backdrop-filter backdrop-blur-lg bg-opacity-20 border border-gray-200 dark:border-gray-700">
                        <img src="https://picsum.photos/80/80?random=2" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-lg mr-4">
                        <div>
                            <h4 class="font-semibold text-gray-800 dark:text-white">Getting Started with Glassmorphism</h4>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Views: <span class="font-semibold">3,800</span></p>
                        </div>
                    </div>

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

<style>
/* Add a basic glassmorphism effect using a pseudo-element or backdrop-filter */
.glass {
    /* Example glassmorphism styles */
    /* The backdrop-filter and background-color with opacity are key */
    /* backdrop-filter: blur(10px); */
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}
</style>

Composant Composants de visualisation de données

Un composant de visualisation de données réactif, compatible avec le mode sombre pour les blogs, avec un design rétro/vintage avec une palette de couleurs complémentaires et des éléments interactifs complexes.

Ouvrir Aperçu

                <div class="bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200 p-8 font-sans">
  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold text-indigo-700 dark:text-teal-400">Data Insights</h1>
      <div class="flex items-center">
        <span class="mr-4">Theme:</span>
        <button class="px-3 py-1 rounded bg-indigo-700 text-white dark:bg-teal-400 dark:text-gray-900" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
      </div>
    </header>

    <!-- Main Content -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Chart Area -->
      <section class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-teal-400">Sales Performance</h2>
        <!-- Placeholder for a complex chart - In a real scenario, this would be an SVG or canvas element -->
        <div class="h-64 bg-gray-300 dark:bg-gray-600 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
          [ Complex Chart Placeholder ]
        </div>
        <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
          <p>Detailed sales data visualization would appear here.</p>
        </div>
      </section>

      <!-- Metrics and Details -->
      <section class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Metric Card 1 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">Total Revenue</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">$150,000</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">+12% from last month</p>
        </div>

        <!-- Metric Card 2 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">New Users</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">3,500</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">-5% from last month</p>
        </div>

        <!-- Details Card -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg col-span-full">
          <h3 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-teal-400">Recent Activity</h3>
          <ul class="text-sm text-gray-700 dark:text-gray-300">
            <li class="mb-2">New order #1012 placed</li>
            <li class="mb-2">User

Composant Composants de visualisation de données

Un composant simple de visualisation de données conçu pour le commerce électronique, doté d’une interface en mode sombre avec des couleurs vives.

Ouvrir Aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Sales Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Sales</h3>
            <p class="text-3xl text-violet-500">$12,345</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Orders</h3>
            <p class="text-3xl text-green-400">150</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Total Customers</h3>
            <p class="text-3xl text-blue-400">80</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg">
            <h3 class="text-lg font-semibold">Average Order Value</h3>
            <p class="text-3xl text-yellow-400">$82.30</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Recent Orders</h3>
        <ul class="list-disc list-inside mt-2">
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>John Doe</span>
                </div>
                <span class="text-violet-400">$120.00</span>
            </li>
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>Jane Smith</span>
                </div>
                <span class="text-green-400">$85.00</span>
            </li>
            <li class="flex items-center justify-between bg-gray-600 p-3 rounded-lg mb-2">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                    <span>Emily Johnson</span>
                </div>
                <span class="text-blue-400">$96.00</span>
            </li>
        </ul>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Sales Chart</h3>
        <img src="https://picsum.photos/400/200" alt="Sales Chart" class="mt-2 rounded-lg">
    </div>
</div>

Composants de visualisation de données

Un composant de visualisation de données e-commerce simple et réactif avec un style de conception glassmorphism et une palette de couleurs monochromatiques, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-800 flex items-center justify-center p-5">
    <div class="bg-white dark:bg-gray-900 bg-opacity-60 backdrop-blur-lg rounded-lg shadow-lg p-8 w-full max-w-3xl">
        <h2 class="text-gray-900 dark:text-white text-2xl font-bold mb-5">Product Insights</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Sales</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/100" alt="Sales Insights" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$15,237</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Total Products</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/101" alt="Product Count" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">250</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">Average Order Value</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/102" alt="Average Order Value" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">$61.50</p>
            </div>
            <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
                <h3 class="text-gray-800 dark:text-gray-200 font-semibold mb-2">New Customers</h3>
                <img class="w-full h-32 object-cover rounded-lg" src="https://picsum.photos/200/103" alt="New Customers" />
                <p class="text-gray-600 dark:text-gray-400 mt-2">35</p>
            </div>
        </div>
        <div class="mt-5 border-t border-gray-300 dark:border-gray-600 pt-5">
            <h3 class="text-gray-900 dark:text-white font-bold mb-2">Customer Feedback</h3>
            <div class="flex items-center">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar" />
                <div class="ml-4">
                    <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">"Great shopping experience! Highly recommend."</p>
                </div>
            </div>
        </div>
    </div>
</div>

Composants de visualisation de données

Un composant de tableau de bord de visualisation de données de style rétro vintage avec un thème sombre qui présente des tons de terre et une mise en page simple.

Ouvrir Aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-amber-300 mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">User Statistics</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Users: 250</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Data Visualization" class="w-full rounded-lg mt-2">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">Sales Overview</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Sales: $10,000</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Sales Overview" class="w-full rounded-lg mt-2">
        </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4 mt-4">
        <h2 class="text-xl text-green-200">Recent Activity</h2>
        <ul class="text-gray-300 dark:text-gray-400">
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User1 logged in</span>
            </li>
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User2 made a purchase</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>User3 logged out</span>
            </li>
        </ul>
    </div>
</div>

Composant de visualisation des données

Un composant de visualisation de données réactif conçu dans le style Material Design avec une palette de couleurs pastel, adapté à la présentation de travaux de portfolio avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-4">
    <h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200 mb-6">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/200" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 1</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It's visually appealing and user-friendly.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/201" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 2</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. It focuses on usability and design.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/202" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 3</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Created with attention to detail.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/300/203" alt="Portfolio Item" class="w-full h-32 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-300">Project Title 4</h3>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project. Designed with modern aesthetics.</p>
            </div>
        </div>
    </div>
</div>

Composant de visualisation de données Neumorphism

Composant de visualisation de données de style Neumorphism pour le contenu du blog, avec une palette de couleurs pastel, une complexité modérée, une réactivité et une prise en charge du mode sombre.

Ouvrir Aperçu

                <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visualization Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
  body { @apply bg-gray-200 dark:bg-gray-800 transition-colors duration-500; }
  .neumorphic-card { @apply rounded-2xl bg-gray-200 dark:bg-gray-800 shadow-xl dark:shadow-none transition-all duration-500;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-card {
    box-shadow: 7px 7px 15px #444444, -7px -7px 15px #b6b6b6;
  }
  .neumorphic-input { @apply rounded-xl bg-gray-200 dark:bg-gray-800 p-3 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition-all duration-500;
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
  }
  .dark .neumorphic-input {
     box-shadow: inset 5px 5px 10px #444444, inset -5px -5px 10px #b6b6b6;
  }
  .pastel-blue { @apply text-blue-400 dark:text-blue-300; }
  .pastel-pink { @apply text-pink-400 dark:text-pink-300; }
  .pastel-green { @apply text-green-400 dark:text-green-300; }
</style>
</head>
<body class="p-6">

<div class="max-w-4xl mx-auto">

  <!-- Data Visualization Card -->
  <div class="neumorphic-card p-6 mb-8">
    <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Monthly Sales Overview</h2>

    <div class="flex flex-wrap -mx-3 mb-5">
      <!-- Metric 1 -->
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-blue">1500</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Units Sold</div>
        </div>
      </div>
      <!-- Metric 2 -->
      <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-pink">$75,000</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Revenue</div>
        </div>
      </div>
      <!-- Metric 3 -->
      <div class="w-full md:w-1/3 px-3">
        <div class="neumorphic-card p-4 text-center">
          <div class="text-3xl font-bold pastel-green">20%</div>
          <div class="text-sm text-gray-600 dark:text-gray-400">Growth Rate</div>
        </div>
      </div>
    </div>

    <!-- Placeholder for a simple chart (e.g., a bar chart represented with divs) -->
    <div class="mt-8">
      <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Sales by Category</h3>
      <div class="flex items-end h-40">
        <!-- Bar 1 -->
        <div class="flex-1 mx-2">
          <div class="bg-blue-300 dark:bg-blue-600 rounded-t-lg h-32" style="height: 80%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category A</div>
        </div>
        <!-- Bar 2 -->
        <div class="flex-1 mx-2">
          <div class="bg-pink-300 dark:bg-pink-600 rounded-t-lg h-24" style="height: 60%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category B</div>
        </div>
        <!-- Bar 3 -->
        <div class="flex-1 mx-2">
          <div class="bg-green-300 dark:bg-green-600 rounded-t-lg h-36" style="height: 90%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category C</div>
        </div>
           <!-- Bar 4 -->
        <div class="flex-1 mx-2">
          <div class="bg-yellow-300 dark:bg-yellow-600 rounded-t-lg h-20" style="height: 50%;"></div>
          <div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category D</div>
        </div>
      </div>
    </div>

  </div>

  <!-- Example of another component: Search Bar -->
  <div class="neumorphic-card p-6">
    <h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Filter Data</h3>
    <input type="text" placeholder="Search..." class="neumorphic-input w-full text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400">
  </div>

</div>

</body>
</html>

Composants de visualisation de données

Un composant complexe de visualisation des données du tableau de bord avec une esthétique rétro/vintage et des schémas de couleurs complémentaires.

Ouvrir Aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
    <h1 class="text-3xl font-bold mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-red-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">User Statistics</h2>
            <p class="text-lg">Total Users: 1,200</p>
            <p class="text-lg">Active: 850</p>
            <img src="https://picsum.photos/300/200?random=1" alt="User Stats" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-blue-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Sales Overview</h2>
            <p class="text-lg">Total Sales: $20,000</p>
            <p class="text-lg">Monthly Growth: 15%</p>
            <img src="https://picsum.photos/300/200?random=2" alt="Sales Overview" class="mt-4 rounded-lg" />
        </div>
        <div class="bg-green-500 p-4 rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">Performance Goals</h2>
            <p class="text-lg">Gained 300 New Users</p>
            <p class="text-lg">Target Achieved: 95%</p>
            <img src="https://picsum.photos/300/200?random=3" alt="Performance Goals" class="mt-4 rounded-lg" />
        </div>
    </div>
    <div class="mt-6 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
        <h2 class="text-xl font-semibold">Recent Activities</h2>
        <ul class="list-disc list-inside">
            <li><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> John Doe added a new item</li>
            <li><img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Mike Smith reached 1,000 sales</li>
            <li><img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="inline w-8 h-8 rounded-full"> Alex Johnson updated their profile</li>
        </ul>
    </div>
</div>

Composants de visualisation de données

Composants de visualisation de données de style Neumorphism pour un portefeuille avec prise en charge du thème sombre

Ouvrir Aperçu

                <div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
      <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
    </div>
    <!-- Chart Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
      <img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
      <p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
    </div>
    <!-- Profile Component -->
    <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
      <h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
      <div class="flex items-center mb-3">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
        <div class="text-gray-900 dark:text-gray-100">
          <p class="font-semibold">Jane Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
        </div>
      </div>
      <p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
    </div>
  </div>
</div>