Composants de visualisation de données
Un composant de visualisation de données réactif avec des éléments de conception 3D avec prise en charge des thèmes sombres.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center py-10">
<div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden transform transition-all hover:scale-105 hover:shadow-2xl">
<div class="p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Sales Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
<h3 class="text-xl text-white font-medium">Monthly Sales</h3>
<img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=1" alt="Sales Chart">
<p class="text-white mt-2">Total Sales: $15,000</p>
</div>
<div class="bg-gradient-to-br from-green-400 to-green-600 rounded-lg p-4 flex flex-col items-center shadow-lg">
<h3 class="text-xl text-white font-medium">User Growth</h3>
<img class="rounded-lg mt-2" src="https://picsum.photos/300/200?random=2" alt="User Growth Chart">
<p class="text-white mt-2">New Users: 500</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-6">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Team Members</h2>
<div class="flex justify-around mt-4">
<div class="flex flex-col items-center">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
<p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Sales Manager</p>
</div>
<div class="flex flex-col items-center">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
<p class="text-sm text-gray-700 dark:text-gray-300">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Data Analyst</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.
Composants de visualisation de données
Un composant de visualisation de données de style rétro/vintage avec prise en charge du thème sombre et des effets réactifs utilisant Tailwind CSS.
Composant de visualisation des données
Un composant de visualisation de données réactif conçu avec une esthétique rétro/vintage inspirée des années 80 et 90, avec la prise en charge des thèmes sombres et l’utilisation d’images de remplacement.