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
HTML Code
<div class="bg-gray-300 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Data Visualization</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Chart Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Sales Analytics</h3>
<img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="rounded-md" />
<p class="text-gray-600 dark:text-gray-400 mt-2">An overview of sales performance over the last year.</p>
</div>
<!-- Chart Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">User Engagement</h3>
<img src="https://picsum.photos/400/200?random=2" alt="User Engagement Chart" class="rounded-md" />
<p class="text-gray-600 dark:text-gray-400 mt-2">Statistics related to user interaction across different platforms.</p>
</div>
<!-- Profile Component -->
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-shadow hover:shadow-xl col-span-1 md:col-span-2">
<h3 class="text-gray-900 dark:text-gray-100 font-bold mb-2">Team Profile</h3>
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-3" />
<div class="text-gray-900 dark:text-gray-100">
<p class="font-semibold">Jane Doe</p>
<p class="text-gray-600 dark:text-gray-400">Data Scientist</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400">Jane specializes in data analysis and machine learning, with over 5 years of experience.</p>
</div>
</div>
</div>Composants associés
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.
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.
Composants de visualisation de données
Un composant de tableau de bord de visualisation de données de style rétro vintage avec un thème sombre qui présente des tons de terre et une mise en page simple.