Functional Components Component
A complex, responsive dashboard component with a monospace/developer aesthetic, using cool neutrals. Features data visualization elements, terminal-like sections, and dark mode support.
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:/></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">✔</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">✔</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">✔</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">✖</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">✔</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 © 2023 // All rights reserved. >_
</footer>
</div>Related Components
Functional Components
A functional component with skeuomorphic design, responsive effects, and dark theme support using Tailwind CSS.
Functional Components Component - Dark Mode UI
A responsive social media component designed with dark mode and earth tones, suitable for social networking interfaces. Features user avatars, post content, and interaction buttons.
Functional Components Component
A component featuring glassmorphism design style with responsive effects and dark theme support, using Tailwind CSS.