Composant Composants de visualisation de données
Un composant de visualisation de données réactif avec plusieurs éléments interactifs, conçu pour un site Web de blog/contenu. Il présente un design minimaliste / plat, une palette de couleurs complémentaires et inclut la prise en charge du thème sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">Data Visualization Dashboard</h1>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Total Views</p>
<p class="text-3xl font-semibold text-indigo-600 dark:text-indigo-400">15, apt. 234</p>
</div>
<svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm font-medium">New Users</p>
<p class="text-3xl font-semibold text-green-600 dark:text-green-400">2, average. 100</p>
</div>
<svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.55V14a2 2 0 100-4v-3a1 1 0 00-1-1H9V7c-.642 0-1.246.311-1.614.811L4.363 11a3.001 3.001 0 00-.309 3.016l1.248 1.942M18 17h-7l-1.5-1.5"></path></svg>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Bounce Rate</p>
<p class="text-3xl font-semibold text-red-600 dark:text-red-400">32.5%</p>
</div>
<svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md flex items-center justify-between">
<div>
<p class="text-gray-500 dark:text-gray-400 text-sm font-medium">Avg. Session</p>
<p class="text-3xl font-semibold text-yellow-600 dark:text-yellow-400">00:03:45</p>
</div>
<svg class="h-10 w-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
</div>
<!-- Charts Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Page Views Over Time</h2>
<!-- Placeholder for a line chart -->
<div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">Line Chart Placeholder</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">User Acquisition Channels</h2>
<!-- Placeholder for a bar chart -->
<div class="h-64 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
<p class="text-gray-500 dark:text-gray-400">Bar Chart Placeholder</p>
</div>
</div>
</div>
<!-- Engagement & User Info Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md lg:col-span-2">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Top Engaging Content</h2>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-3 flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">How to master Tailwind CSS</p>
<span class="text-sm text-gray-500 dark:text-gray-400">2,100 Views</span>
</li>
<li class="py-3 flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">Understanding JavaScript Async/Await</p>
<span class="text-sm text-gray-500 dark:text-gray-400">1,850 Views</span>
</li>
<li class="py-3 flex justify-between items-center">
<p class="text-gray-700 dark:text-gray-300">A Guide to Modern Web Development</p>
<span class="text-sm text-gray-500 dark:text-gray-400">1,700 Views</span>
</li>
</ul>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Recent Activities</h2>
<ul class="divide-y divide-gray-200 dark:divide-gray-700">
<li class="py-3 flex items-center space-x-3">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar">
<p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">John Doe</span> commented on 'New Features'</p>
</li>
<li class="py-3 flex items-center space-x-3">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/76.jpg" alt="User Avatar">
<p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Jane Smith</span> shared 'Blog Post Analysis'</p>
</li>
<li class="py-3 flex items-center space-x-3">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/77.jpg" alt="User Avatar">
<p class="text-gray-700 dark:text-gray-300 text-sm"><span class="font-medium">Peter Jones</span> viewed 'Data Trends 2023'</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Composants associés
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.
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.
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.