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

Data Visualization Components 구성 요소

유사한 색 구성표를 사용하는 소셜 미디어를 위한 간단한 다크 모드 데이터 시각화 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 min-h-screen p-4 text-gray-200">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg p-6">
    <h2 class="text-xl font-bold mb-4 text-blue-300">Social Media Engagement</h2>
    <div class="space-y-4">
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Likes:</span>
        <span class="text-blue-400 font-semibold">12,345</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Comments:</span>
        <span class="text-green-400 font-semibold">890</span>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-gray-400">Shares:</span>
        <span class="text-teal-400 font-semibold">321</span>
      </div>
      <div class="w-full bg-gray-700 rounded-full h-2.5 mt-4">
        <div class="bg-gradient-to-r from-blue-400 via-green-400 to-teal-400 h-2.5 rounded-full" style="width: 75%;"></div>
      </div>
      <p class="text-sm text-gray-500 text-center mt-2">Overall Engagement: 75%</p>
    </div>
  </div>
</div>

관련 구성 요소

Playful_Booking_Calendar

장난스럽고 쾌활한 단색 예약 달력 구성 요소로, 둥근 요소가 있어 예약 및 예약 시스템에 적합합니다. 반응이 빠르고 다크 모드를 지원합니다.

열다

RetroDashboard컴포넌트

Retro/Vintage Dashboard 구성 요소는 그레이스케일 구성표와 다크 모드를 지원합니다. 이 복잡한 구성 요소는 여러 대화형 요소, 반응형 디자인을 특징으로 하며 스타일링에 Tailwind CSS를 사용합니다. 대시보드 또는 제어판에 적합합니다.

열다

데이터 시각화 구성 요소

파스텔 색상 구성표가 있는 머티리얼 디자인 스타일로 설계된 반응형 데이터 시각화 구성 요소로, 다크 모드를 지원하는 포트폴리오 작업을 보여주는 데 적합합니다.

열다