Composants de visualisation de données
Un composant de visualisation de données conçu dans un style brutaliste avec Tailwind CSS, avec des mises en page réactives et la prise en charge des thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Data Visualization</h2>
<div class="flex flex-col md:flex-row space-x-0 md:space-x-4 space-y-4 md:space-y-0">
<div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Bar Chart</h3>
<img src="https://picsum.photos/400/200?random=1" alt="Bar Chart Placeholder" class="w-full h-auto rounded-lg">
</div>
<div class="w-full md:w-1/2 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Pie Chart</h3>
<img src="https://picsum.photos/400/200?random=2" alt="Pie Chart Placeholder" class="w-full h-auto rounded-lg">
</div>
</div>
<div class="mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">User Statistics</h3>
<div class="flex flex-wrap items-center space-x-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-200">User 1</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-200">User 2</span>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-200">User 3</span>
</div>
</div>
</div>
</div>Composants associés
Composants de visualisation de données
Composants de visualisation de données de style Neumorphism pour un portefeuille avec prise en charge du thème sombre
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 de visualisation des données (néon/lueur)
Un composant complexe de visualisation de données pour les applications SaaS avec des effets de néon/lueur, des couleurs neutres chaudes et une réactivité totale avec prise en charge du mode sombre.