Neumorphism Data Visualization Component
Neumorphism-styled data visualization component for blog content, with a pastel color scheme, moderate complexity, responsiveness, and dark mode support.
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>Related Components
Data Visualization Components
A responsive data visualization component featuring 3D design elements with support for dark themes.
Data Visualization Components
A retro/vintage styled data visualization component with dark theme support and responsive effects using Tailwind CSS.
Data Visualization Component
A responsive data visualization component designed with a retro/vintage aesthetic inspired by the 80s and 90s, featuring dark theme support and using placeholder images.