Componente Colonne
Componente Colonne per una Dashboard, caratterizzato da un design 3D con colori complementari. Include tre colonne reattive con un layout semplice, supporto per la modalità oscura e utilizza Tailwind CSS per lo stile. Non è incluso alcun JavaScript.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
<div class="container mx-auto grid gap-8 md:grid-cols-3">
<!-- Column 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
<p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
<div class="mt-4 relative z-10">
<div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
<p class="text-gray-400">Chart Placeholder</p>
</div>
</div>
</div>
<!-- Column 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
<p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
<div class="mt-4 relative z-10">
<div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
<p class="text-gray-400">Graph Placeholder</p>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
<p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
<div class="mt-4 relative z-10">
<div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
<p class="text-gray-400">Data Placeholder</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente Colonne Brutaliste
Un componente di colonne complesso in stile brutalista, con una combinazione di colori monocromatica, adatto per il consumo di blog o contenuti. Il design presenta un contrasto elevato, layout insoliti e supporta la modalità scura.
Componente per colonne di produzione aziendale/professionale
Un componente di colonne complesso e reattivo progettato per aziende manifatturiere/industriali con un'estetica aziendale/professionale e una combinazione di colori autunnali. Include il supporto per la modalità oscura e HTML semantico.
Luxury_Job_Board_Columns_Component
Un componente di colonne monocromatiche di lusso/premium per bacheche di lavoro e piattaforme di sviluppo della carriera. Presenta un design sofisticato con una tipografia elegante, ricchi elementi dell'interfaccia, piena reattività e supporto per la modalità oscura.