ダッシュボードコンポーネント
3D 要素とアース トーンで設計されたレスポンシブ ダッシュボード コンポーネントで、ダーク テーマをサポートするデータの視覚化とコントロール パネルが表示されます。
HTMLコード
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
<div class="max-w-7xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Dashboard</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-yellow-100 dark:bg-yellow-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=1" alt="Data Visualization" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
<p class="text-gray-600 dark:text-gray-400">Current sales data and trends.</p>
</div>
</div>
<!-- Card 2 -->
<div class="bg-green-100 dark:bg-green-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=2" alt="User Engagement" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h2>
<p class="text-gray-600 dark:text-gray-400">Track user interactions and engagement metrics.</p>
</div>
</div>
<!-- Card 3 -->
<div class="bg-blue-100 dark:bg-blue-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=3" alt="Performance Metrics" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Performance Metrics</h2>
<p class="text-gray-600 dark:text-gray-400">Analyze performance against key metrics.</p>
</div>
</div>
<!-- Card 4 -->
<div class="bg-red-100 dark:bg-red-800 rounded-lg shadow-md transform transition duration-300 hover:scale-105">
<img src="https://picsum.photos/200/150?random=4" alt="Visitor Statistics" class="rounded-t-lg">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Visitor Statistics</h2>
<p class="text-gray-600 dark:text-gray-400">Monitor visitor statistics and behavior.</p>
</div>
</div>
</div>
<div class="mt-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Recent Users</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
<ul class="space-y-4">
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 2 days ago</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 1 week ago</p>
</div>
</li>
<li class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
<div>
<h3 class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">Joined 3 weeks ago</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>関連コンポーネント
Brutalist_Dating_Dashboard
デートやソーシャルプラットフォーム向けのブルータリズムスタイルのダッシュボードコンポーネントで、大胆なデザイン、ハイコントラスト、パープル/バイオレットの配色が特徴です。ダークモードのサポートによるレスポンシブ。
高級農業ダッシュボードコンポーネント
農業および農業Webサイト向けのエレガントで洗練されたダッシュボードコンポーネントで、鮮やかなエメラルドのアクセントが付いた黒と白の配色が特徴です。これには、主要な指標、最近のアクティビティ、インタラクティブな要素が含まれており、完全にレスポンシブでダークモードをサポートするように設計されています。
レトロビジネスダッシュボード
ビジネス/企業のWebサイト向けのレトロ/ビンテージグレースケールダッシュボードコンポーネントで、適度な複雑さとレスポンシブデザインを備えています。スタイリングにTailwind CSS dark:プレフィックスを使用してダークテーマをサポートします。画像はpicsum.photosと randomuser.me のアバターから提供されました。