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
Weather_Climate_Retro_Dark_Dashboard
Un composant de tableau de bord simple et rétro en mode sombre pour les données météorologiques et climatiques, réactif sur tous les appareils.
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.
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.