RetroDashboardComponent
Composant de tableau de bord rétro/vintage avec prise en charge du schéma en niveaux de gris et du mode sombre. Ce composant complexe comporte plusieurs éléments interactifs, un design réactif et utilise Tailwind CSS pour le style. Il convient pour un tableau de bord ou un panneau de contrôle.
HTML Code
<div class="min-h-screen bg-gray-200 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-8 font-mono">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold mb-8 text-center uppercase tracking-widest">
<span class="text-gray-600 dark:text-gray-400">RetroDASH</span>
</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-8">
<!-- Card 1: Sales Overview -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Sales Overview</h2>
<div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">$12,450</div>
<p class="text-sm text-gray-500 dark:text-gray-400">Total Sales This Month</p>
<div class="h-24 bg-gray-100 dark:bg-gray-700 rounded mt-4"></div>
</div>
<!-- Card 2: User Activity -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">User Activity</h2>
<div class="flex items-center justify-between mb-2">
<span class="text-3xl font-extrabold text-green-600 dark:text-green-400">2,345</span>
<span class="text-sm text-gray-500 dark:text-gray-400">Active Users</span>
</div>
<ul class="space-y-2 mt-4">
<li class="flex items-center text-gray-700 dark:text-gray-300">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>John Doe logged in</span>
</li>
<li class="flex items-center text-gray-700 dark:text-gray-300">
<img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
<span>Jane Smith viewed report</span>
</li>
</ul>
</div>
<!-- Card 3: Traffic Sources -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition duration-300 hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-700 dark:text-gray-300">Traffic Sources</h2>
<ul class="space-y-2 text-gray-700 dark:text-gray-300">
<li class="flex justify-between items-center">
<span>Direct</span>
<span class="font-bold">40%</span>
</li>
<li class="flex justify-between items-center">
<span>Referral</span>
<span class="font-bold">30%</span>
</li>
<li class="flex justify-between items-center">
<span>Organic Search</span>
<span class="font-bold">20%</span>
</li>
<li class="flex justify-between items-center">
<span>Social Media</span>
<span class="font-bold">10%</span>
</li>
</ul>
</div>
</div>
<!-- Main Data Visualization Area -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-4 text-gray-700 dark:text-gray-300">Revenue Trends</h2>
<div class="h-64 bg-gray-100 dark:bg-gray-700 rounded flex items-center justify-center text-gray-500 dark:text-gray-400">
<p class="text-lg">Graph/Chart Placeholder</p>
</div>
</div>
<!-- Tabbed Interface -->
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<div class="border-b border-gray-300 dark:border-gray-600 mb-4">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
Overview
</button>
<button class="whitespace-nowrap py-4 px-1 border-b-2 border-blue-500 text-sm font-medium text-blue-600 dark:text-blue-400 focus:outline-none">
Analytics
</button>
<button class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600 focus:outline-none focus:text-gray-700 dark:focus:text-gray-300 focus:border-gray-300 dark:focus:border-gray-600">
Settings
</button>
</nav>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p>Detailed analytics content goes here. This is a placeholder for a complex data table or more interactive charts.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
<h3 class="font-bold mb-2">Detailed Metric 1</h3>
<p>Value: <span class="font-semibold">1,234</span></p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
<h3 class="font-bold mb-2">Detailed Metric 2</h3>
<p>Value: <span class="font-semibold">56.78%</span></p>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Composants de visualisation de données de commerce électronique
Un composant de visualisation de données pour le commerce électronique, stylisé avec les principes de conception matérielle, les tons terreux et la prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
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.
Composant de visualisation de données Art Déco
Il s’agit d’un composant complexe et réactif de visualisation de données de style Art déco pour les services de conseil, avec des motifs géométriques et une luxueuse palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.