Componenti funzionali Componente
Componente del dashboard con componenti funzionali che utilizzano i principi di Material Design, una combinazione di colori analoga e una complessità moderata. Il componente include il design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Codice HTML
<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>
Componenti correlati
Componenti funzionali Componente - Stile Brutalismo
Un componente web funzionale progettato in stile brutalista utilizzando Tailwind CSS. Il componente presenta un layout audace con contrasto elevato, effetti reattivi e supporto per temi scuri. Include immagini segnaposto e avatar per un appeal visivo.
Componenti funzionali
Un componente funzionale con design scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente funzionale e-commerce
Componente di e-commerce minimalista dal design piatto con combinazione di colori triadica e supporto per la modalità oscura reattiva.