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
Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component
Un composant de visualisation de données élégant et sophistiqué conçu pour les plateformes de rencontres et les réseaux sociaux, avec une palette de couleurs en niveaux de gris et une mise en page réactive avec prise en charge du mode sombre. Affiche les statistiques des utilisateurs et les mesures de connexion.
Composants de visualisation de données
Un composant de visualisation de données réactif conçu avec les principes de Material Design tels que les mises en page basées sur une grille et les effets de profondeur, avec prise en charge des thèmes sombres.
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.