列コンポーネント
ダッシュボードの列コンポーネントで、補色の 3D デザインが特徴です。シンプルなレイアウト、ダークモードのサポート、スタイル設定にTailwind CSSを使用する3つのレスポンシブカラムが含まれています。JavaScriptは含まれていません。
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>