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

차트 구성 요소

파스텔 색상과 다크 모드를 지원하는 간단하고 반응이 빠른 차트 구성 요소로, 호버 효과를 통한 미묘한 마이크로 인터랙션으로 블로그/콘텐츠 소비를 위해 설계되었습니다. 자바스크립트가 없습니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
    <div class="flex flex-col space-y-4">
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
        <div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
          <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
        </div>
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
        <div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
        <div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
          <div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
        </div>
        <div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
        <div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
          <div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
        </div>
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

차트 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 차트 구성 요소로, 파스텔 색조 구성표와 복잡한 상호 작용성을 특징으로 하여 포트폴리오를 보여줍니다. 여기에는 Tailwind CSS 클래스를 사용한 다크 모드 지원이 포함됩니다.

열다

차트 구성 요소

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

열다

Glassmorphism 판매 차트

Glassmorphism 스타일, 생생한 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 차트 구성 요소로 전자 상거래 대시보드에 적합합니다.

열다