Componente di visualizzazione dei dati di neumorfismo
Componente di visualizzazione dei dati in stile neumorfismo per i contenuti del blog, con una combinazione di colori pastello, complessità moderata, reattività e supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Componente Componenti di visualizzazione dei dati
Un componente di visualizzazione dei dati semplice, pulito e ispirato al codice per siti di documentazione/wiki, con caratteri a spaziatura fissa, estetica del terminale e tonalità di colore seppia/marrone, con reattività completa e supporto per la modalità scura.
Componente di visualizzazione dei dati - Agricoltura industriale
Un componente di visualizzazione dei dati con un'estetica industriale e grezza, che utilizza una combinazione di colori viola/viola, adatto per l'agricoltura e i siti Web di allevamento. Visualizza le metriche chiave in un layout reattivo con supporto per la modalità scura.
Componente di visualizzazione dei dati in modalità oscura
Un componente di visualizzazione dei dati complesso e reattivo progettato con un tema monocromatico scuro. Dispone di più elementi di visualizzazione interattivi, tra cui un grafico a linee, un grafico a barre e schede dati. Include effetti al passaggio del mouse e utilizza il supporto per la modalità oscura di Tailwind. Adatto per blog e piattaforme di consumo di contenuti.