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

차트 구성 요소

반응형 효과와 어두운 테마를 지원하는 간단하고 미니멀한 차트 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Sales Performance</h2>
  <div class="flex justify-between items-center mb-4">
    <div class="text-sm text-gray-500 dark:text-gray-400">Last 30 Days</div>
    <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none">
      <option>Monthly</option>
      <option>Weekly</option>
      <option>Daily</option>
    </select>
  </div>
  <div class="h-40">
    <!-- Placeholder for chart -->
    <div class="flex items-end h-full">
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-1/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-full rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-3/4 rounded-t dark:bg-blue-600 ml-1"></div>
      <div class="w-1/6 bg-blue-500 h-2/4 rounded-t dark:bg-blue-600 ml-1"></div>
    </div>
  </div>
</div>

관련 구성 요소

Industrial_Retro_RealEstate_Charts

산업, 복고풍 부동산 미학을 가진 간단한 차트 구성 요소로, 차분한 색상, 노출된 요소, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

열다

Neumorphic Charts 컴포넌트

뉴모픽 디자인 스타일과 유사한 색 구성표를 가진 복잡하고 반응형 차트 구성 요소로, 작업이나 제품을 선보이기 위한 포트폴리오에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

차트 구성 요소

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

열다