Panel de control de componentes funcionales
Un componente de tablero receptivo diseñado con los principios de Material Design y un esquema de color monocromático. Cuenta con diseños basados en cuadrículas, elementos interactivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 1</h2>
<img src="https://picsum.photos/200?random=1" alt="Image 1" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 1.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 2</h2>
<img src="https://picsum.photos/200?random=2" alt="Image 2" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 2.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card 3</h2>
<img src="https://picsum.photos/200?random=3" alt="Image 3" class="w-full h-48 object-cover rounded my-2">
<p class="text-gray-600 dark:text-gray-400">Details about card 3.</p>
<button class="mt-2 bg-blue-500 dark:bg-blue-700 text-white rounded px-4 py-2 hover:bg-blue-600 dark:hover:bg-blue-600">Action</button>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-sm p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">User Profile</h2>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-20 h-20 rounded-full mb-2">
<p class="text-gray-600 dark:text-gray-400">User Name</p>
<p class="text-gray-500 dark:text-gray-500">User Email</p>
</div>
</div>
</div>Componentes relacionados
Componentes funcionales Componente
Componente funcional de tablero minimalista con diseño receptivo y soporte de tema oscuro.
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.
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.