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>

관련 구성 요소

Brutalist_Dating_Dashboard

데이트 및 소셜 플랫폼을 위한 브루탈리즘 스타일의 대시보드 구성 요소로, 대담한 디자인, 높은 대비, 보라색/보라색 색 구성표가 특징입니다. 다크 모드 지원으로 반응형.

열다

Dashboards 구성 요소

비즈니스 또는 기업 웹 사이트를 위해 설계된 복고풍 대시보드 구성 요소로, 80년대/90년대의 미학과 현대적인 레이아웃 및 색 구성표를 결합합니다. 반응형이며 어두운 테마를 지원하며 통계 카드, 사용자 프로필 등과 같은 대화형 요소를 제공합니다.

열다

아르데코 소셜 대시보드

데이트/소셜 플랫폼을 위한 중간 정도의 복잡성 대시보드 구성 요소로, 차분한/채도가 낮은 색상과 완전한 반응성을 갖춘 아르데코 디자인 스타일을 특징으로 합니다. 프로필 카드, 활동 피드 및 탐색이 포함되며 다크 모드가 지원됩니다.

열다