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
Un composant de colonne simple et réactif avec un thème monochrome sombre, adapté à la présentation de portfolios.
Composant Colonnes
Il s’agit d’un composant de colonne simple et réactif pour le commerce électronique, avec des influences de Material Design, des couleurs en niveaux de gris et une prise en charge du mode sombre.