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
Composante des colonnes brutalistes
Un composant complexe de colonnes au design brutaliste, avec une palette de couleurs monochromatiques, adapté à la consommation de blogs ou de contenu. Le design présente un contraste élevé, des mises en page inhabituelles et prend en charge le mode sombre.