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.
Código HTML
<div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
<header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700">
</header>
<main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
</main>
<footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
</footer>
</div>Componentes relacionados
Diseño del panel de control de criptomonedas de Cyberpunk
Un diseño de tablero receptivo con temática cyberpunk para aplicaciones de criptomonedas y blockchain, con acentos de neón, fondos oscuros y colores apagados. Incluye navegación en la barra lateral, un área de contenido principal y una barra superior.
Componente de diseño del panel de entrega de alimentos
Un diseño de panel de entrega de alimentos complejo y receptivo con una interfaz de usuario oscura y un esquema de colores dulces/dulces, con una barra lateral, un encabezado, un área de contenido principal y múltiples elementos interactivos para una aplicación de comida/restaurante. Incluye soporte para modo oscuro.
Swiss_International_Typography_SAAS_Layout
Un diseño de aplicación SaaS complejo y receptivo que utiliza principios de diseño de tipografía suiza/internacional con un esquema de color otoñal. Cuenta con una barra lateral de navegación, encabezado, área de contenido principal y widgets, todos con soporte para modo oscuro.