Componente Paneles
Componente de paneles con diseño de neumorfismo, efectos responsivos y soporte para temas oscuros.
Código HTML
<section class="p-8 dark:bg-gray-900 dark:text-white">
<div class="container mx-auto">
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Card 1 -->
<div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold">Sales Overview</h3>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- Card 2 -->
<div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold">Revenue Analysis</h3>
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Card 3 -->
<div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold">Customer Growth</h3>
<p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<!-- Card 4 -->
<div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold">Marketing Performance</h3>
<p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- Card 5 -->
<div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold">Inventory Status</h3>
<p class="text-gray-700 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<!-- Card 6 -->
<div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold">Website Traffic</h3>
<p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div>
</div>
</div>
</section>
Componentes relacionados
Componente del panel de control de criptomonedas
Un componente de tablero de criptomonedas complejo y receptivo con un estilo de diseño de tipografía suiza / internacional, con elementos degradados multicolores y soporte para modo oscuro. Incluye varias secciones, como una descripción general de la cartera, tendencias del mercado, transacciones recientes y un gráfico.
Componente Paneles
Un componente de paneles de control receptivo para aplicaciones de redes sociales con microinteracciones y un esquema de color triádico, construido con Tailwind CSS.
Componente de panel de control de Luxury/Premium Marketplace
Un componente de panel de control complejo y receptivo para un mercado de múltiples proveedores con un estilo de diseño de lujo/premium. Cuenta con una combinación de colores azul corporativo profesional, tipografía sofisticada y compatibilidad con el modo oscuro. Incluye secciones para descripción general, ventas recientes, productos principales y estadísticas rápidas.