Functional Components Component
A dashboard component with functional components using Material Design principles, an analogous color scheme, and moderate complexity. The component includes responsive design and dark theme support using Tailwind CSS. No JavaScript is included.
HTML Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Functional Components Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Analogous Colors (example: blue-green, blue, blue-violet) */
/* Using shades of Tailwind's built-in colors for simplicity */
.bg-primary {
background-color: #437c90; /* A blue-green */
}
.text-primary {
color: #437c90;
}
.bg-secondary {
background-color: #325a6c; /* A bluer tone */
}
.text-secondary {
color: #325a6c;
}
.bg-tertiary {
background-color: #5a6c8c; /* A blue-violet */
}
.text-tertiary {
color: #5a6c8c;
}
/* Dark Mode Styles */
.dark .bg-primary {
background-color: #1e3a48;
}
.dark .text-primary {
color: #1e3a48;
}
.dark .bg-secondary {
background-color: #152c3a;
}
.dark .text-secondary {
color: #152c3a;
}
.dark .bg-tertiary {
background-color: #2c3a4e;
}
.dark .text-tertiary {
color: #2c3a4e;
}
/* Material Design Shadows (using Tailwind's built-in shadows) */
.shadow-material {
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.dark .shadow-material {
box-shadow: 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4">
<div class="container mx-auto">
<!-- Header -->
<header class="flex justify-between items-center mb-8">
<h1 class="text-2xl font-bold">Dashboard</h1>
<button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
<!-- Dark mode toggle - functional implementation would require JS -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</header>
<!-- Functional Components Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Component 1: Stats Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
<h2 class="text-lg font-semibold text-primary mb-2">Total Users</h2>
<p class="text-3xl font-bold">1,234</p>
<p class="text-sm text-gray-500 dark:text-gray-400">+10% from last month</p>
</div>
<!-- Component 2: Recent Activity Feed -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
<h2 class="text-lg font-semibold text-secondary mb-4">Recent Activity</h2>
<ul>
<li class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Added new report</p>
</div>
</li>
<li class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Updated user profile</p>
</div>
</li>
<li class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-3">
<div>
<p class="text-sm font-semibold">Peter Jones</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Generated weekly summary</p>
</div>
</li>
</ul>
</div>
<!-- Component 3: Quick Links -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
<h2 class="text-lg font-semibold text-tertiary mb-4">Quick Links</h2>
<div class="grid grid-cols-2 gap-4">
<a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Settings</a>
<a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Reports</a>
<a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Analytics</a>
<a href="#" class="block bg-gray-200 dark:bg-gray-700 text-center py-3 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">Users</a>
</div>
</div>
<!-- Component 4: Image Card (example) -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
<h2 class="text-lg font-semibold text-primary mb-4">Data Visualization (Placeholder)</h2>
<img src="https://picsum.photos/seed/dashboard/400/200" alt="Placeholder Image" class="rounded-md w-full">
</div>
<!-- Component 5: Another Stats Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
<h2 class="text-lg font-semibold text-secondary mb-2">Revenue</h2>
<p class="text-3xl font-bold">$56,789</p>
<p class="text-sm text-gray-500 dark:text-gray-400">-5% from last quarter</p>
</div>
<!-- Component 6: Text Block (example) -->
<div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-material">
<h2 class="text-lg font-semibold text-tertiary mb-4">Notes</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">This is a placeholder for important notes or messages for the user.</p>
</div>
</div>
</div>
<!-- Basic Dark Mode Toggle Script (for demonstration, not a full implementation) -->
<script>
const toggleButton = document.querySelector('header button');
const html = document.querySelector('html');
toggleButton.addEventListener('click', () => {
html.classList.toggle('dark');
});
</script>
</body>
</html>
Related Components
Blog Functional Component
Functional Components Component with 3D design, Complementary color scheme, moderate complexity for blogs, responsive with dark theme support. No JS, just HTML and Tailwind.
Functional Components Component
A component featuring glassmorphism design style with responsive effects and dark theme support, using Tailwind CSS.