CCHub Logo CCHub Tailwind Collection
구성 요소 대시보드 Dashboard 구성 요소

Dashboard 구성 요소

3D 디자인과 파스텔 색조 구성표, 반응형 및 다크 모드 지원 기능이 있는 간단한 대시보드 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-wrap bg-gray-100 dark:bg-gray-900">
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-blue rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-users fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Users</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">2,156 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 10%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-pink rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-chart-line fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Sales</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$5,340 <span class="text-pastel-red text-base"><i class="fas fa-arrow-down"></i> 5%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-yellow rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-wallet fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Revenue</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$1,234 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 12%</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

게임 대시보드

다크 모드용으로 설계된 복잡하고 반응이 빠른 게임 대시보드 UI 구성 요소로, 회색조 색 구성표를 특징으로 합니다. 선수 통계, 최근 활동 및 게임 목록이 포함됩니다.

열다

Luxury Agriculture Dashboard 구성 요소

농업 및 농업 웹 사이트를 위한 우아하고 정교한 대시보드 구성 요소로, 생생한 에메랄드 액센트가 있는 흑백 색 구성표를 특징으로 합니다. 여기에는 주요 메트릭, 최근 활동 및 대화형 요소가 포함되며, 완전히 반응하고 다크 모드를 지원하도록 설계되었습니다.

열다

Dashboards 구성 요소

비즈니스/기업용으로 단색 색 구성표가 있는 다크 모드용으로 설계된 복잡한 대시보드 구성 요소입니다. 풍부한 대화형 요소를 특징으로 하며 반응형입니다.

열다