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.
HTML Code
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/400/200?random=1" alt="Data Chart 1" class="rounded-lg mb-2">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of chart 1 showing insightful data.</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow">
<img src="https://picsum.photos/400/200?random=2" alt="Data Chart 2" class="rounded-lg mb-2">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Chart Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of chart 2 providing valuable insights.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow mt-6">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300">User Profiles</h3>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="w-16 h-16 rounded-full mr-4">
<div>
<p class="text-gray-700 dark:text-gray-300 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
</div>
</div>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="w-16 h-16 rounded-full mr-4">
<div>
<p class="text-gray-700 dark:text-gray-300 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Data Analyst</p>
</div>
</div>
</div>
</div>Composants associés
Composant Composants de visualisation de données
Il s’agit d’un composant de réservation/réservation complexe et minimaliste avec une palette de couleurs néon/électrique, avec des éléments de visualisation de données tels qu’un calendrier et un sélecteur de créneaux horaires. Entièrement réactif avec prise en charge du mode sombre.
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.
Skeuomorphic_Vibrant_Business_Dashboard
Un composant de tableau de bord complexe, réactif et skeuomorphe aux couleurs vives, conçu pour une utilisation professionnelle/d’entreprise, avec des visualisations de données et des éléments interactifs avec prise en charge du mode sombre.