Componenti Dashboard Componente cruscotto brutalista in scala di grigi

Componente cruscotto brutalista in scala di grigi

Un layout di dashboard semplice, in stile brutalista, in scala di grigi per siti Web aziendali/aziendali, reattivo con supporto per la modalità oscura, costruito con Tailwind CSS.

Anteprima

Codice 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>

Componenti correlati

Dashboard di gioco

Un componente dell'interfaccia utente del cruscotto di gioco complesso e reattivo progettato per la modalità scura, con una combinazione di colori in scala di grigi. Include le statistiche dei giocatori, le attività recenti e gli elenchi delle partite.

Aperto

Componente Dashboard

Componente Dashboard reattivo con microinterazioni, combinazione di colori in scala di grigi e livello di complessità complesso su misura per scopi di blog/contenuti. Supporta il tema scuro.

Aperto

Cruscotto aziendale retrò

Un componente dashboard in scala di grigi retrò/vintage per siti Web aziendali/aziendali, con complessità moderata e design reattivo. Supporta il tema scuro utilizzando il prefisso Tailwind CSS dark: per lo stile. Immagini provenienti da picsum.photos e avatar da randomuser.me.

Aperto