Composant Colonnes
Composant de colonnes pour un tableau de bord, présentant un design 3D avec des couleurs complémentaires. Il comprend trois colonnes réactives avec une mise en page simple, la prise en charge du mode sombre et utilise Tailwind CSS pour le style. Aucun JavaScript n’est inclus.
HTML Code
<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>Composants associés
Composant Colonnes
Composant de colonnes réactives avec style Glassmorphism, schéma de couleurs triadique, niveau de complexité simple pour les entreprises/entreprises, inclut la prise en charge du mode sombre.
Composant Colonnes
Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.
Luxury_Dating_Columns_Component
Un composant de mise en page simple et élégant à trois colonnes pour les plateformes de rencontres/sociales, doté d’une esthétique luxueuse avec une palette de couleurs noires, blanches et d’accentuation, une réactivité totale et une prise en charge du mode sombre.