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.
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visualization Component</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
body { @apply bg-gray-200 dark:bg-gray-800 transition-colors duration-500; }
.neumorphic-card { @apply rounded-2xl bg-gray-200 dark:bg-gray-800 shadow-xl dark:shadow-none transition-all duration-500;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-card {
box-shadow: 7px 7px 15px #444444, -7px -7px 15px #b6b6b6;
}
.neumorphic-input { @apply rounded-xl bg-gray-200 dark:bg-gray-800 p-3 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 transition-all duration-500;
box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.dark .neumorphic-input {
box-shadow: inset 5px 5px 10px #444444, inset -5px -5px 10px #b6b6b6;
}
.pastel-blue { @apply text-blue-400 dark:text-blue-300; }
.pastel-pink { @apply text-pink-400 dark:text-pink-300; }
.pastel-green { @apply text-green-400 dark:text-green-300; }
</style>
</head>
<body class="p-6">
<div class="max-w-4xl mx-auto">
<!-- Data Visualization Card -->
<div class="neumorphic-card p-6 mb-8">
<h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300">Monthly Sales Overview</h2>
<div class="flex flex-wrap -mx-3 mb-5">
<!-- Metric 1 -->
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<div class="neumorphic-card p-4 text-center">
<div class="text-3xl font-bold pastel-blue">1500</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Units Sold</div>
</div>
</div>
<!-- Metric 2 -->
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<div class="neumorphic-card p-4 text-center">
<div class="text-3xl font-bold pastel-pink">$75,000</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Revenue</div>
</div>
</div>
<!-- Metric 3 -->
<div class="w-full md:w-1/3 px-3">
<div class="neumorphic-card p-4 text-center">
<div class="text-3xl font-bold pastel-green">20%</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Growth Rate</div>
</div>
</div>
</div>
<!-- Placeholder for a simple chart (e.g., a bar chart represented with divs) -->
<div class="mt-8">
<h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Sales by Category</h3>
<div class="flex items-end h-40">
<!-- Bar 1 -->
<div class="flex-1 mx-2">
<div class="bg-blue-300 dark:bg-blue-600 rounded-t-lg h-32" style="height: 80%;"></div>
<div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category A</div>
</div>
<!-- Bar 2 -->
<div class="flex-1 mx-2">
<div class="bg-pink-300 dark:bg-pink-600 rounded-t-lg h-24" style="height: 60%;"></div>
<div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category B</div>
</div>
<!-- Bar 3 -->
<div class="flex-1 mx-2">
<div class="bg-green-300 dark:bg-green-600 rounded-t-lg h-36" style="height: 90%;"></div>
<div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category C</div>
</div>
<!-- Bar 4 -->
<div class="flex-1 mx-2">
<div class="bg-yellow-300 dark:bg-yellow-600 rounded-t-lg h-20" style="height: 50%;"></div>
<div class="text-center text-xs text-gray-600 dark:text-gray-400 mt-1">Category D</div>
</div>
</div>
</div>
</div>
<!-- Example of another component: Search Bar -->
<div class="neumorphic-card p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-300">Filter Data</h3>
<input type="text" placeholder="Search..." class="neumorphic-input w-full text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400">
</div>
</div>
</body>
</html>Composants associés
Composants de visualisation de données
Composant Web pour la visualisation de données à l’aide du style Material Design avec Tailwind CSS, avec des mises en page réactives, la prise en charge des thèmes sombres et des images d’espace réservé.
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 des données
Composant de visualisation de données Neumorphism avec effets réactifs et prise en charge du thème sombre.