Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
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>
Composants associés
Composants fonctionnels - Style brutalisme
Un composant web fonctionnel conçu dans un style brutaliste à l’aide de Tailwind CSS. Le composant présente une mise en page audacieuse avec un contraste élevé, des effets réactifs et la prise en charge des thèmes sombres. Il comprend des images de remplacement et des avatars pour un attrait visuel.
Composants fonctionnels
Un composant Web simple conçu pour la consommation de blogs et de contenu, avec des micro-interactions attrayantes et une palette de couleurs en niveaux de gris avec prise en charge du thème sombre.
Composants fonctionnels
Un composant fonctionnel avec un design skeuomorphique, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.