Composants Composants de mise en page Composant Composants de mise en page

Composant Composants de mise en page

Composant de mise en page de tableau de bord réactif avec un thème sombre, doté d’une barre latérale et d’une zone de contenu principale. Il utilise une palette de couleurs triadique pour un attrait visuel.

Aperçu

HTML Code

<div class="min-h-screen flex flex-col bg-gray-900 text-gray-200">
  <!-- Header -->
  <header class="flex items-center justify-between p-4 bg-gray-800 shadow-md">
    <h1 class="text-2xl font-bold text-cyan-400">Dashboard</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Home</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Settings</a></li>
        <li><a href="#" class="text-orange-400 hover:text-orange-300">Profile</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content Area -->
  <div class="flex flex-1 flex-col md:flex-row">
    <!-- Sidebar -->
    <aside class="w-full md:w-64 bg-gray-800 p-4 shadow-lg">
      <nav>
        <ul class="space-y-4">
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Overview</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Analytics</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Reports</a></li>
          <li><a href="#" class="block text-lime-400 hover:text-lime-300">Users</a></li>
        </ul>
      </nav>
    </aside>

    <!-- Content -->
    <main class="flex-1 p-6">
      <h2 class="text-3xl font-semibold mb-6 text-cyan-400">Welcome to your Dashboard</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Card 1 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-orange-400">Total Sales</h3>
          <p class="text-3xl font-bold text-gray-100">$12,345</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-lime-400">New Customers</h3>
          <p class="text-3xl font-bold text-gray-100">256</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
          <h3 class="text-xl font-bold mb-2 text-cyan-400">Page Views</h3>
          <p class="text-3xl font-bold text-gray-100">8,765</p>
        </div>
      </div>

      <!-- Example Data Table -->
      <div class="mt-8 bg-gray-800 dark:bg-gray-700 p-6 rounded-lg shadow-md">
        <h3 class="text-xl font-bold mb-4 text-cyan-400">Recent Orders</h3>
        <div class="overflow-x-auto">
          <table class="min-w-full leading-normal">
            <thead>
              <tr>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Order ID</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Product</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Amount</th>
                <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-700 text-left text-xs font-semibold text-gray-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1001</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-lime-400">Laptop Pro</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$999</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1002</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-orange-400">Mechanical Keyboard</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$120</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-amber-400">Pending</td>
              </tr>
              <tr>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">#1003</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-cyan-400">Wireless Mouse</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-gray-200">$50</td>
                <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm text-green-400">Completed</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
  </div>
</div>

Composants associés

Présentation du portefeuille

Il s’agit d’un composant de mise en page réactif simple pour un portefeuille axé sur les micro-interactions avec des couleurs complémentaires, la prise en charge du mode sombre et un minimum d’éléments.

Ouvrir

Mise en page RetroBlog

Une mise en page de blog simple et réactive avec une esthétique rétro/vintage, la prise en charge du mode sombre et une palette de couleurs complémentaire, construite avec Tailwind CSS.

Ouvrir

Composant de mise en page

Un composant de mise en page de blog réactif conçu selon les principes de Material Design, utilisant une palette de couleurs monochromatique et prenant en charge le mode sombre.

Ouvrir