구성 요소 데이터 시각화 구성 요소 Neumorphism Data Visualization 구성 요소

Neumorphism Data Visualization 구성 요소

블로그 콘텐츠를 위한 뉴모피즘 스타일의 데이터 시각화 구성 요소로, 파스텔 색상 구성표, 적당한 복잡성, 응답성 및 다크 모드 지원을 제공합니다.

미리 보기

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>

Neumorphism Data Visualization 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Data Visualization Components 구성 요소

데이터 시각화 구성 요소

다크 모드 데이터 시각화 구성 요소