CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale Komponenten"

Komponente "Funktionale Komponenten"

Eine komplexe, reaktionsschnelle Dashboard-Komponente mit einer Monospace-/Entwickler-Ästhetik unter Verwendung kühler Neutraltöne. Verfügt über Datenvisualisierungselemente, terminalähnliche Abschnitte und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 transition-colors duration-300">

  <!-- Header -->
  <header class="flex flex-col md:flex-row items-center justify-between p-4 mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl md:text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2 md:mb-0">SYSTEM_DASHBOARD:/&gt;</h1>
    <div class="flex items-center space-x-4">
      <span class="text-sm text-gray-600 dark:text-gray-400">STATUS: <span class="text-green-500 dark:text-green-400">ONLINE</span></span>
      <button class="p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a1 1 0 01-.817.986l-3.238.162a1 1 0 00-.785.647L5.787 9.87a1 1 0 01-.194.275l-2.091 2.215a1 1 0 00-.071 1.488l2.946 3.682A1 1 0 008.3 18h7.42a1 1 0 00.999-.817l-.84-7.557a1 1 0 00-.916-.957L13 8.358V5.5c0-.682-.315-1.32-.862-1.745l-3.468-2.67c-.201-.155-.444-.24-.698-.24z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <img class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Left Column (Status & Logs) -->
    <div class="lg:col-span-2 space-y-6">

      <!-- System Overview Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">SYSTEM OVERVIEW://</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">CPU_LOAD:</span> <span class="font-bold text-orange-500 dark:text-orange-400">67%</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-orange-500 h-2 rounded-full" style="width: 67%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">MEM_USAGE:</span> <span class="font-bold text-yellow-500 dark:text-yellow-400">45% (8GB/16GB)</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">DISK_IO:</span> <span class="font-bold text-purple-500 dark:text-purple-400">120MB/s</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-purple-500 h-2 rounded-full" style="width: 70%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">NETWORK_LATENCY:</span> <span class="font-bold text-green-500 dark:text-green-400">18ms</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-green-500 h-2 rounded-full" style="width: 90%;"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity / Command Log -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">COMMAND_LOG://</h2>
        <div class="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-y-auto h-64 text-sm relative">
          <span class="absolute top-2 left-2 text-green-400 text-xs">>$ _</span>
          <pre class="whitespace-pre-wrap mt-4">
            <span class="text-gray-400">[0x1A2B]</span> <span class="text-green-400">SUCCESS</span>: Initializing core modules...
            <span class="text-gray-400">[0x3C4D]</span> <span class="text-yellow-400">WARN</span>: Data integrity check running, 0.5% errors detected.
            <span class="text-gray-400">[0x5E6F]</span> <span class="text-green-400">SUCCESS</span>: System update applied. Reboot required.
            <span class="text-gray-400">[0x7081]</span> <span class="text-red-400">ERROR</span>: Service 'AuthModule' failed to start on port 8080. Port in use.
            <span class="text-gray-400">[0x92A3]</span> <span class="text-green-400">SUCCESS</span>: User 'admin' logged in from 192.168.1.100.
            <span class="text-gray-400">[0xB4C5]</span> <span class="text-yellow-400">WARN</span>: High network traffic detected from external source. Blocked.
            <span class="text-gray-400">[0xD6E7]</span> <span class="text-green-400">SUCCESS</span>: Database backup initiated. Progress: 75%.
            <span class="text-gray-400">[0xF8G9]</span> <span class="text-blue-400">INFO</span>: Sensor array 'Alpha' reporting normal parameters.
            <span class="text-gray-400">[0x10H1]</span> <span class="text-red-400">ERROR</span>: Critical temperature detected in 'ServerRack-3'. Initiating shutdown.
            <span class="text-gray-400">[0x22I3]</span> <span class="text-green-400">SUCCESS</span>: Log rotation completed successfully.
            <span class="text-gray-400">[0x44J5]</span> <span class="text-yellow-400">WARN</span>: Disk space low on '/dev/sda1'. 10GB remaining.
            <span class="text-gray-400">[0x66K7]</span> <span class="text-green-400">SUCCESS</span>: Scheduled task 'DataPurge' executed.
          </pre>
        </div>
      </section>

    </div>

    <!-- Right Column (Components & Controls) -->
    <div class="space-y-6">

      <!-- Active Components Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">ACTIVE_COMPONENTS://</h2>
        <ul class="space-y-3">
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>NETWORK_MONITOR_v2.1</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1024</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>DATABASE_ENGINE_SQL_9</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1025</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-yellow-500 dark:text-yellow-400">&#x2714;</span>
            <span>SECURE_SHELL_DAEMON_SSH</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1026</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-red-500 dark:text-red-400">&#x2716;</span>
            <span>PAYMENT_GATEWAY_API_PHP</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: <span class="text-red-500 dark:text-red-400">STOPPED</span></span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>LOG_AGGREGATOR_v1.5</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1028</span>
          </li>
        </ul>
        <button class="mt-4 w-full p-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">VIEW ALL PROCESSES</button>
      </section>

      <!-- Quick Actions Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">QUICK_ACTIONS://</h2>
        <div class="grid grid-cols-2 gap-3">
          <button class="p-3 bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.102a2 2 0 03.487 1.343L9.5 10l-1.5 5.25a1 1 0 00.324 1.013l.836.671L10 18h2v-2.102a2 2 0 00-.487-1.343L8.5 10l1.5-5.25a1 1 0 00-.324-1.013l-.836-.671L10 2H8z" clip-rule="evenodd"></path></svg>
            REBOOT_SYSTEM
          </button>
          <button class="p-3 bg-red-100 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></svg>
            HALT_SERVICE
          </button>
          <button class="p-3 bg-green-100 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-200 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
            ADD_NEW_TASK
          </button>
          <button class="p-3 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
            EDIT_CONFIG
          </button>
        </div>
      </section>

      <!-- System Performance Chart Placeholder -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">PERFORMANCE_TREND://</h2>
        <div class="bg-gray-200 dark:bg-gray-700 h-48 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm">
          [GRAPH_PLACEHOLDER: Data Visualization Here]
          <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Placeholder chart">
        </div>
      </section>

    </div>

  </div>

  <!-- Footer -->
  <footer class="text-center mt-8 text-gray-500 dark:text-gray-400 text-xs">
    SYSTEM_DASHBOARD_v1.0 &copy; 2023 // All rights reserved. &gt;_
  </footer>

</div>

Verwandte Komponenten

Komponente "Funktionale Komponenten"

Eine Dashboard-Komponente mit funktionalen Komponenten, die Material-Design-Prinzipien verwenden, ein analoges Farbschema und moderate Komplexität. Die Komponente umfasst Responsive Design und Unterstützung für dunkle Themen mit Tailwind CSS. Es ist kein JavaScript enthalten.

Offen

Neumorphismus Funktionale Komponente

Eine Webkomponente nach dem Neumorphism-Designstil, die mit Tailwind CSS erstellt wurde. Es unterstützt Responsive Design und Dark Mode rein über CSS.

Offen

Komponente "Funktionale Komponenten"

Eine Social-Media-Komponente, die im Brutalismus-Stil und in Pastellfarben gestaltet wurde und über eine komplexe Benutzeroberfläche für Interaktionen mit Unterstützung des Dunkelmodus verfügt.

Offen