CCHub Logo CCHub Tailwind Collection
Componenti Componenti di visualizzazione dei dati Componente di visualizzazione dei dati in modalità oscura

Componente di visualizzazione dei dati in modalità oscura

Un componente di visualizzazione dei dati complesso e reattivo progettato con un tema monocromatico scuro. Dispone di più elementi di visualizzazione interattivi, tra cui un grafico a linee, un grafico a barre e schede dati. Include effetti al passaggio del mouse e utilizza il supporto per la modalità oscura di Tailwind. Adatto per blog e piattaforme di consumo di contenuti.

Anteprima

Codice HTML 

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

Componenti correlati

Componenti di visualizzazione dei dati

Un componente web per la visualizzazione dei dati che utilizza lo stile Material Design con Tailwind CSS, con layout reattivi, supporto per temi scuri e immagini segnaposto.

Aperto

Componente di visualizzazione dei dati (neon/bagliore)

Un componente complesso per la visualizzazione dei dati per applicazioni SaaS con effetti neon/bagliore, colori neutri caldi e reattività completa con supporto della modalità scura.

Aperto

Componenti di visualizzazione dei dati

Un componente di visualizzazione dei dati reattivo progettato con principi di Material Design come layout basati su griglia ed effetti di profondità, con supporto per temi scuri.

Aperto