CCHub Logo CCHub Tailwind Collection
구성 요소 인포그래픽 인포그래픽 구성 요소

인포그래픽 구성 요소

뉴모피즘 스타일, 그레이스케일 색 구성표, 심플 레이아웃, 대시보드용, 어두운 테마 지원으로 반응형 인포그래픽 구성 요소

미리 보기

HTML 코드 

<div class="p-4 md:p-8 bg-gray-200 dark:bg-gray-800 antialiased font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Total Users</h3>
        <p class="text-3xl font-bold">15,250</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 5.2%</span>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">Revenue</h3>
        <p class="text-3xl font-bold">$150,000</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-green-500 dark:text-green-400">+ 8.1%</span>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="rounded-lg p-6 shadow-neumorphism-light dark:shadow-neumorphism-dark">
      <div class="text-gray-700 dark:text-gray-300 mb-4">
        <h3 class="text-lg font-semibold mb-2">New Orders</h3>
        <p class="text-3xl font-bold">750</p>
      </div>
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>Since last month</span>
        <span class="text-red-500 dark:text-red-400">- 2.5%</span>
      </div>
    </div>
  </div>

  <!-- Include custom shadow styles for Neumorphism -->
  <style>
    .shadow-neumorphism-light {
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphism-dark {
      box-shadow: 7px 7px 15px #444444, -7px -7px 15px #666666;
    }
  </style>
</div>

관련 구성 요소

인포그래픽 구성 요소

반응형 인포그래픽 구성 요소로, 어두운 테마 지원으로 사용자 작업에 응답하는 작고 매력적인 애니메이션을 특징으로 하며 Tailwind CSS를 사용하여 만들었습니다.

열다

인포그래픽 구성 요소

비즈니스 웹사이트를 위한 복잡하고 반응이 빠른 인포그래픽 구성 요소로, Tailwind CSS를 사용하여 스큐어모피즘 스타일과 생생한 색 구성표로 설계되었습니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다

레트로 빈티지 인포그래픽 구성 요소

Tailwind CSS로 제작된 반응형 파스텔 색상의 레트로/빈티지 스타일 소셜 미디어 인포그래픽 대시보드 구성 요소로, 사용자 프로필 통계, 인기 해시태그 막대 차트 및 예시 이미지를 제공합니다. Tailwind의 dark: 접두사 및 대화형 호버 애니메이션(JavaScript 필요 없음)을 통한 다크 모드 지원이 포함됩니다.

열다