Komponenten suchen

Kategorien

Komponenten Komponenten für die Datenvisualisierung

Komponenten für die Datenvisualisierung

Komponenten, die Daten in grafischem Format visualisieren

Komponente zur Datenvisualisierung im Dunkelmodus

Eine komplexe, reaktionsschnelle Datenvisualisierungskomponente mit einem dunklen, monochromatischen Design. Verfügt über mehrere interaktive Visualisierungselemente, darunter ein Liniendiagramm, ein Balkendiagramm und Datenkarten. Enthält Hover-Effekte und nutzt die Unterstützung des Dunkelmodus von Tailwind. Geeignet für Blogs und Plattformen zum Konsum von Inhalten.

Offen Vorschau

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

Komponente "Komponenten der Datenvisualisierung"

Glassmorphism Datenvisualisierungskomponente für Blog/Content

Offen Vorschau

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

Komponente "Komponenten der Datenvisualisierung"

Eine reaktionsschnelle, mit dem Dunkelmodus kompatible Datenvisualisierungskomponente für Blogs mit einem Retro-/Vintage-Design mit einem komplementären Farbschema und komplexen interaktiven Elementen.

Offen Vorschau

                <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

Komponente "Komponenten der Datenvisualisierung"

Eine einfache Datenvisualisierungskomponente, die für den E-Commerce entwickelt wurde und über eine Benutzeroberfläche im Dunkelmodus mit leuchtenden Farben verfügt.

Offen Vorschau

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

Komponenten für die Datenvisualisierung

Eine einfache, reaktionsschnelle E-Commerce-Datenvisualisierungskomponente mit einem Glassmorphism-Designstil und einem monochromatischen Farbschema mit Unterstützung für den Dunkelmodus.

Offen Vorschau

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

Komponenten für die Datenvisualisierung

Eine Dashboard-Komponente für die Datenvisualisierung im Retro-Vintage-Stil mit einem dunklen Thema, das Erdtöne und ein einfaches Layout aufweist.

Offen Vorschau

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

Komponente "Datenvisualisierung"

Eine reaktionsschnelle Datenvisualisierungskomponente, die im Material Design-Stil mit einem pastellfarbenen Farbschema entworfen wurde und sich für die Präsentation von Portfolioarbeiten mit Unterstützung des Dunkelmodus eignet.

Offen Vorschau

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

Komponente zur Visualisierung von Neumorphism-Daten

Datenvisualisierungskomponente im Neumorphism-Stil für Blog-Inhalte mit pastellfarbenem Farbschema, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen Vorschau

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

Komponenten für die Datenvisualisierung

Eine komplexe Dashboard-Datenvisualisierungskomponente mit Retro-/Vintage-Ästhetik und komplementären Farbschemata.

Offen Vorschau

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

Komponenten für die Datenvisualisierung

Datenvisualisierungskomponenten im Neumorphism-Stil für ein Portfolio mit Unterstützung für dunkle Themen

Offen Vorschau

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