CCHub Logo CCHub Tailwind Collection
구성 요소 차트 VibrantGlassmorphismChart

VibrantGlassmorphismChart

블로그 및 콘텐츠 사이트에 적합한 생생한 색상의 간단한 Glassmorphism 차트 구성 요소입니다. 구성 요소는 반응형이며 Tailwind CSS를 사용하는 어두운 테마 지원을 포함합니다.

미리 보기

HTML 코드 

<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg max-w-sm mx-auto dark:bg-gray-800 dark:bg-opacity-20">
  <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Sales Overview</h3>
  <div class="relative h-40">
    <canvas id="myChart"></canvas>
  </div>
  <div class="flex justify-around mt-4 text-gray-700 dark:text-gray-300 text-sm">
    <div class="text-center">
      <p class="font-semibold text-teal-500 dark:text-teal-400">January</p>
      <p>$5,200</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-rose-500 dark:text-rose-400">February</p>
      <p>$6,100</p>
    </div>
    <div class="text-center">
      <p class="font-semibold text-fuchsia-500 dark:text-fuchsia-400">March</p>
      <p>$5,500</p>
    </div>
  </div>
</div>

관련 구성 요소

Skeuomorphism Charts 컴포넌트

스큐어모피즘 스타일, 생생한 색상, 소셜 미디어 인터페이스에 대한 다크 모드 지원을 제공하는 반응형 차트 구성 요소입니다.

열다

차트 구성 요소

회색조 색 구성표를 사용하는 어두운 모드의 전자 상거래 웹 응용 프로그램을 위해 설계된 복잡한 차트 구성 요소입니다. 이 구성 요소에는 차트, 데이터 포인트, 도구 설명 및 버튼과 같은 여러 대화형 요소가 포함되어 있으며 Tailwind CSS를 사용한 반응형 디자인이 있습니다.

열다

차트 구성 요소

파스텔 색상과 다크 모드를 지원하는 스큐어모픽 디자인을 보여주는 반응형 대시보드 구성 요소로, 순수 HTML 및 Tailwind CSS를 사용하여 시뮬레이션된 막대 차트, 꺾은선형 차트 및 핵심 성과 지표를 제공합니다. JavaScript는 포함되어 있지 않습니다. 차트는 시각적 표현입니다.

열다