Charts-Komponente
Eine reaktionsschnelle Dashboard-Komponente, die ein skeuomorphes Design mit Pastellfarben und Unterstützung für den Dunkelmodus demonstriert, mit simulierten Balkendiagrammen, Liniendiagrammen und wichtigen Leistungsindikatoren unter Verwendung von reinem HTML und Tailwind CSS. Es ist kein JavaScript enthalten; Diagramme sind visuelle Darstellungen.
HTML-Code
<div class="min-h-screen p-4 sm:p-8
bg-gradient-to-br from-blue-100 to-gray-100 dark:from-gray-900 dark:to-gray-800
font-sans text-gray-800 dark:text-gray-200">
<div class="max-w-7xl mx-auto">
<!-- Dashboard Header -->
<header class="mb-8 p-6 rounded-xl relative
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-xl shadow-blue-200/50 dark:shadow-gray-950/70
border border-gray-100 dark:border-gray-700
text-center
">
<h1 class="text-3xl sm:text-4xl font-extrabold mb-2 text-gray-900 dark:text-gray-100 tracking-wide drop-shadow-sm">
Analytics Dashboard
</h1>
<p class="text-md sm:text-lg text-gray-600 dark:text-gray-400">
Data insights at a glance with a Classic UI
</p>
</header>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Card 1: Sales Overview (Bar Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
overflow-hidden
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Sales Overview</h3>
<!-- Timeframe buttons (skeuomorphic) -->
<div class="flex space-x-2 mb-6">
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Daily</button>
<button class="
px-3 py-1 sm:px-4 sm:py-2 rounded-md text-sm sm:text-base
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800
text-gray-700 dark:text-gray-300
shadow-sm shadow-gray-200 dark:shadow-gray-900
border border-gray-200 dark:border-gray-700
hover:shadow-md hover:shadow-gray-300 dark:hover:shadow-gray-900
active:shadow-inner active:shadow-gray-300 dark:active:shadow-gray-900
active:from-gray-200 active:to-gray-100 dark:active:from-gray-800 dark:active:to-gray-700
">Monthly</button>
</div>
<!-- Chart Area - Recessed look -->
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative flex items-end justify-around space-x-2
">
<!-- Example Bar Chart bars -->
<div class="w-1/6 md:w-1/6 h-full bg-blue-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-blue-600" style="height: 60%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-green-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-green-600" style="height: 80%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-purple-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-purple-600" style="height: 70%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-pink-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-pink-600" style="height: 40%;"></div>
<div class="w-1/6 md:w-1/6 h-full bg-yellow-300 rounded-sm shadow-sm hover:shadow-md transition-all duration-200 dark:bg-yellow-600" style="height: 90%;"></div>
</div>
<!-- Legend -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Product A
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-green-300 dark:bg-green-600 mr-2 shadow-sm"></span> Product B
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Product C
</div>
</div>
</div>
<!-- Card 2: User Engagement (Simulated Line Chart) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">User Engagement</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
relative
">
<!-- Placeholder for Line Chart - Use div elements to represent a wavy line -->
<div class="absolute inset-0 flex items-end">
<div class="w-full h-full bg-gradient-to-t from-blue-300/60 to-transparent dark:from-blue-600/60"
style="
clip-path: polygon(0 100%, 10% 80%, 20% 90%, 30% 70%, 40% 75%, 50% 60%, 60% 65%, 70% 50%, 80% 55%, 90% 40%, 100% 0, 100% 100%);
"></div>
</div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/4"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-1/2"></div>
<div class="absolute left-0 right-0 h-px border-t border-dotted border-gray-400 opacity-50 top-3/4"></div>
</div>
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-blue-300 dark:bg-blue-600 mr-2 shadow-sm"></span> Active Users
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-gray-300 dark:bg-gray-500 mr-2 shadow-sm"></span> Sessions
</div>
</div>
</div>
<!-- Card 3: Traffic Sources (Simulated Pie Chart / Segmented Data) -->
<div class="
relative rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Traffic Sources</h3>
<div class="
min-h-[180px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
flex items-center justify-center
">
<!-- Simple Circle Placeholder for Pie Chart -->
<div class="w-36 h-36 sm:w-48 sm:h-48 rounded-full shadow-lg border-2 border-gray-300 dark:border-gray-700 flex items-center justify-center
bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-600 dark:to-pink-600
">
<div class="text-center">
<p class="text-3xl sm:text-4xl font-bold text-white drop-shadow-md">85%</p>
<p class="text-sm sm:text-md text-white drop-shadow-sm">Total Traffic</p>
</div>
</div>
</div>
<!-- Legend for segments -->
<div class="mt-4 flex flex-wrap gap-4 text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-purple-300 dark:bg-purple-600 mr-2 shadow-sm"></span> Direct (45%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-pink-300 dark:bg-pink-600 mr-2 shadow-sm"></span> Referral (30%)
</div>
<div class="flex items-center">
<span class="w-4 h-4 rounded-full bg-yellow-300 dark:bg-yellow-600 mr-2 shadow-sm"></span> Social (25%)
</div>
</div>
</div>
<!-- Card 4: Key Performance Indicators -->
<div class="
relative col-span-1 md:col-span-2 lg:col-span-3
rounded-lg p-4 sm:p-6
bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
shadow-lg shadow-gray-300/50 dark:shadow-gray-950/70
border border-gray-200 dark:border-gray-700
">
<h3 class="text-lg sm:text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Key Performance Indicators</h3>
<div class="
min-h-[150px] sm:min-h-[200px] w-full p-4 mb-4
rounded-md
bg-gray-100 dark:bg-gray-800
shadow-inner shadow-gray-300 dark:shadow-gray-900
border border-gray-300 dark:border-gray-700
grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-8 place-items-center
">
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Users</p>
<p class="text-2xl sm:text-3xl font-bold text-blue-500 dark:text-blue-400 mt-1 drop-shadow-md">1.2M</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Revenue</p>
<p class="text-2xl sm:text-3xl font-bold text-green-500 dark:text-green-400 mt-1 drop-shadow-md">$500k</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Conversion Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-purple-500 dark:text-purple-400 mt-1 drop-shadow-md">4.5%</p>
</div>
<div class="text-center">
<p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Bounce Rate</p>
<p class="text-2xl sm:text-3xl font-bold text-red-500 dark:text-red-400 mt-1 drop-shadow-md">28%</p>
</div>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Neumorphe Diagramme"
Eine komplexe, reaktionsschnelle Diagrammkomponente mit einem neumorphen Designstil und einem analogen Farbschema, das sich für ein Portfolio eignet, um Arbeiten oder Produkte zu präsentieren. Enthält Unterstützung für den Dunkelmodus.
Retro_Vintage_Pastel_Social_Charts_Component
Eine komplexe, reaktionsschnelle Charts-Komponente mit einer Retro-/Vintage-Ästhetik der 80er/90er Jahre in Pastellfarben, die für Social-Media-Plattformen entwickelt wurde. Enthält Unterstützung für den Dunkelmodus.
Industrial_Chart_Component_Ocean_Blue_Simple
Eine einfache, reaktionsschnelle Diagrammkomponente mit einer industriellen, rohstofforientierten Ästhetik in Ozean-/Blautönen, die für gemeinnützige/wohltätige Organisationen entwickelt wurde. Inklusive Unterstützung für den Dunkelmodus.