ダッシュボードコンポーネント
ビジネスや企業のWebサイト向けに設計されたレトロなダッシュボードコンポーネントで、80年代/90年代の美学とモダンなレイアウトと配色を組み合わせています。レスポンシブでダークテーマをサポートし、統計のカード、ユーザープロファイルなどのインタラクティブな要素を備えています。
HTMLコード
<div class="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
<header class="flex justify-between items-center p-4 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 shadow-lg">
<h1 class="text-2xl font-bold text-white">Dashboard</h1>
<button class="bg-white text-purple-500 py-2 px-4 rounded-lg dark:bg-gray-800 dark:text-purple-400 transition-all">Edit</button>
</header>
<main class="flex-grow p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Total Sales</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">$45,000</p>
<img src="https://picsum.photos/200" alt="Sales Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Users</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">1200</p>
<img src="https://picsum.photos/200" alt="User Statistics" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Feedback</h2>
<p class="text-2xl text-purple-500 dark:text-purple-300">300</p>
<img src="https://picsum.photos/200" alt="Feedback Chart" class="mt-4 rounded-lg">
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-md">
<h2 class="font-semibold text-lg">Team Members</h2>
<div class="flex space-x-2 mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-10 h-10 rounded-full">
</div>
</div>
</main>
<footer class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-700 dark:to-pink-800 text-white text-center p-4">
<p>© 2023 Company Name. All rights reserved.</p>
</footer>
</div>