Componentes funcionales Componente
Un componente de tablero con componentes funcionales que utilizan los principios de Material Design, un esquema de color análogo y una complejidad moderada. El componente incluye diseño responsivo y soporte de temas oscuros usando Tailwind CSS. No se incluye JavaScript.
Código 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>
Componentes relacionados
Componentes funcionales Componente
Un componente de cartera minimalista diseñado con Tailwind CSS, con un esquema de colores vibrantes y compatible con el modo oscuro. Este componente está diseñado para mostrar trabajos o productos e incluye imágenes y marcadores de posición de avatar.
Componentes funcionales Componente
Componente funcional de tablero minimalista con diseño receptivo y soporte de tema oscuro.
Blog Componente Funcional
Componentes funcionales Componente con diseño 3D, combinación de colores complementaria, complejidad moderada para blogs, responsivo con soporte para temas oscuros. No hay JS, solo HTML y Tailwind.