Componente Dashboard
Componente Dashboard con design del neumorfismo, effetti reattivi e supporto per temi scuri.
Codice 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>
Componenti correlati
Componente Dashboard
Un semplice componente monocromatico della dashboard in modalità oscura per i portafogli, costruito con Tailwind CSS. Presenta un design reattivo e utilizza diverse tonalità di un unico colore per un look elegante e minimalista.
Dashboard_Weather_Climate_Swiss
Un componente complesso e reattivo del cruscotto meteo e climatico ispirato alla tipografia svizzera/internazionale, che utilizza i toni della terra e supporta la modalità scura. Presenta più punti dati come il tempo attuale, le previsioni, la qualità dell'aria e le tendenze climatiche.
Componente del cruscotto dell'agricoltura di lusso
Un componente dashboard elegante e sofisticato per siti Web di agricoltura e agricoltura, caratterizzato da una combinazione di colori in bianco e nero con un vibrante accento smeraldo. Include metriche chiave, attività recenti ed elementi interattivi, progettati per essere completamente reattivi e supportare la modalità oscura.