Componentes de diseño
Un componente de diseño de panel receptivo que utiliza microinteracciones y un esquema de color pastel, diseñado para mostrar paneles de control y visualización de datos con soporte para modo oscuro.
Código HTML
<div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
<header class="flex justify-between items-center mb-5">
<h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
<button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
<p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
<img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
</div>
<div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
<p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
<img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
</div>
<div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
<p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
<img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
</div>
<div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
<p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
<img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
</div>
<div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
<p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
<img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
</div>
<div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
<p class="text-gray-600 dark:text-gray-400">John Doe</p>
</div>
</div>
</div>
<footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
<p>© 2023 Dashboard. All rights reserved.</p>
</footer>
</div>Componentes relacionados
Componente de diseño de redes sociales
Un componente de diseño de redes sociales responsivo y complejo inspirado en 3D con colores vibrantes y soporte para temas oscuros utilizando Tailwind CSS. Incluye un encabezado con un logotipo y navegación, un área de contenido principal con tarjetas dinámicas para publicaciones y una barra lateral para perfiles de usuario y temas de tendencia. Cada elemento está diseñado para dar una sensación de profundidad e interacción.
Componente Componentes de diseño
Un diseño de componente web responsivo que sigue los principios de Material Design para una aplicación de redes sociales con soporte para temas oscuros.
Componente Componentes de diseño
Un componente de diseño diseñado en un estilo skeuomórfico que imita a sus homólogos del mundo real, con elementos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.