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.
HTML Code
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4 text-center">Data Visualization</h2>
<div class="mb-4">
<h3 class="text-lg font-semibold mb-2">User Statistics</h3>
<div class="overflow-hidden rounded-lg">
<img class="w-full h-32 object-cover" src="https://picsum.photos/id/237/400/200" alt="Data Visualization Image">
</div>
<p class="mt-2 text-sm">This chart represents the users joining over the past year.</p>
</div>
<div class="font-mono mb-6">
<p class="text-sm">Last updated: <span class="font-bold">2 days ago</span></p>
</div>
<div class="bg-gray-700 p-4 text-center rounded-lg">
<h3 class="text-lg font-semibold">Profile Overview</h3>
<div class="flex justify-around mt-4">
<div class="flex flex-col items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="mt-2 text-sm">User 1</span>
</div>
<div class="flex flex-col items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<span class="mt-2 text-sm">User 2</span>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 {
background-color: #1f2937;
}
.bg-gray-700 {
background-color: #374151;
}
}
</style>
</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.
Social_Media_Dashboard
Un composant complexe de tableau de bord de médias sociaux avec une esthétique monochromatique de Material Design, avec des mises en page basées sur une grille, des effets de profondeur et une réactivité avec prise en charge du mode sombre. Conçu pour les interfaces de réseaux sociaux.
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.