CCHub Logo CCHub Tailwind Collection
구성 요소 데이터 시각화 구성 요소 Data Visualization Components 구성 요소

Data Visualization Components 구성 요소

블로그를 위한 반응형 다크 모드 호환 데이터 시각화 구성 요소로, 보색과 보색 구성표와 복잡한 대화형 요소가 있는 레트로/빈티지 디자인을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-gray-200 text-gray-800 dark:bg-gray-800 dark:text-gray-200 p-8 font-sans">
  <div class="container mx-auto">

    <!-- Header -->
    <header class="flex justify-between items-center mb-8">
      <h1 class="text-3xl font-bold text-indigo-700 dark:text-teal-400">Data Insights</h1>
      <div class="flex items-center">
        <span class="mr-4">Theme:</span>
        <button class="px-3 py-1 rounded bg-indigo-700 text-white dark:bg-teal-400 dark:text-gray-900" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
      </div>
    </header>

    <!-- Main Content -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Chart Area -->
      <section class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold mb-4 text-indigo-700 dark:text-teal-400">Sales Performance</h2>
        <!-- Placeholder for a complex chart - In a real scenario, this would be an SVG or canvas element -->
        <div class="h-64 bg-gray-300 dark:bg-gray-600 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
          [ Complex Chart Placeholder ]
        </div>
        <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
          <p>Detailed sales data visualization would appear here.</p>
        </div>
      </section>

      <!-- Metrics and Details -->
      <section class="grid grid-cols-1 sm:grid-cols-2 gap-6">

        <!-- Metric Card 1 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">Total Revenue</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">$150,000</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">+12% from last month</p>
        </div>

        <!-- Metric Card 2 -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
          <h3 class="text-lg font-semibold mb-2 text-indigo-700 dark:text-teal-400">New Users</h3>
          <p class="text-2xl font-bold text-gray-800 dark:text-gray-200">3,500</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">-5% from last month</p>
        </div>

        <!-- Details Card -->
        <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg col-span-full">
          <h3 class="text-lg font-semibold mb-4 text-indigo-700 dark:text-teal-400">Recent Activity</h3>
          <ul class="text-sm text-gray-700 dark:text-gray-300">
            <li class="mb-2">New order #1012 placed</li>
            <li class="mb-2">User

관련 구성 요소

Social_Media_Dashboard

단색 머티리얼 디자인 미학을 갖춘 복잡한 소셜 미디어 대시보드 구성 요소로, 그리드 기반 레이아웃, 깊이 효과 및 다크 모드 지원을 통한 응답성을 특징으로 합니다. 소셜 네트워킹 인터페이스용으로 설계되었습니다.

열다

Luxury_Premium_Grayscale_Dating_Social_Data_Visualization_Component

데이트 및 소셜 플랫폼을 위해 설계된 우아하고 정교한 데이터 시각화 구성 요소로, 그레이스케일 색 구성표와 다크 모드를 지원하는 반응형 레이아웃을 특징으로 합니다. 사용자 통계 및 연결 메트릭을 표시합니다.

열다

데이터 시각화 구성 요소

glassmorphism 디자인 스타일과 단색 색 구성표를 갖춘 간단하고 반응이 빠른 전자 상거래 데이터 시각화 구성 요소로, 다크 모드를 지원합니다.

열다