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

Brutalist Grayscale Dashboard 구성 요소

비즈니스/기업 웹 사이트를 위한 단순하고 브루탈리즘 스타일의 그레이스케일 대시보드 레이아웃으로, 다크 모드 지원으로 반응하며 Tailwind CSS로 구축되었습니다.

미리 보기

HTML 코드 

<section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white">
  <div class="max-w-7xl mx-auto">
    <!-- Banner -->
    <div class="mb-8 border-4 border-black dark:border-white">
      <img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover">
    </div>
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-extrabold">Company Dashboard</h1>
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white">
    </div>
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Total Sales</h2>
        <p class="text-2xl">67,890</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">New Users</h2>
        <p class="text-2xl">1,234</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Performance</h2>
        <p class="text-2xl">78%</p>
      </div>
    </div>
  </div>
</section>

관련 구성 요소

게임 대시보드

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

열다

Dashboards 구성 요소

포트폴리오 표시를 위해 설계된 간단하고 반응이 빠른 대시보드 구성 요소로, 마이크로 인터랙션을 통해 흙색에 초점을 맞춥니다. Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

Dashboards 구성 요소

Responsive Dashboards Microinteractions, Grayscale 색 구성표 및 블로그/콘텐츠 목적에 맞게 조정된 복잡한 복잡성 수준이 있는 구성 요소입니다. 어두운 테마를 지원합니다.

열다