CCHub Logo CCHub Tailwind Collection
コンポーネント ダッシュ ボード Brutalist Grayscale Dashboard コンポーネント

Brutalist Grayscale Dashboard コンポーネント

ビジネス/企業のWebサイト向けのシンプルなブルータリズムスタイルのグレースケールダッシュボードレイアウトで、ダークモードをサポートし、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

デートやソーシャルプラットフォーム向けのブルータリズムスタイルのダッシュボードコンポーネントで、大胆なデザイン、ハイコントラスト、パープル/バイオレットの配色が特徴です。ダークモードのサポートによるレスポンシブ。

開ける

ダッシュボードコンポーネント

ビジネスや企業のWebサイト向けに設計されたレトロなダッシュボードコンポーネントで、80年代/90年代の美学とモダンなレイアウトと配色を組み合わせています。レスポンシブでダークテーマをサポートし、統計のカード、ユーザープロファイルなどのインタラクティブな要素を備えています。

開ける