検索コンポーネント

カテゴリ

ダッシュボード

指標の主な性能評価の覚的

メンフィス・セピア・ダッシュボード

メンフィスデザインの美学を備えたダッシュボードコンポーネントで、大胆な幾何学的な形状と温かみのあるセピア/ブラウンのカラーパレットが特徴で、ビジネスや企業のWebサイトに適しています。完全な応答性とダークモードのサポートが含まれています。

                <div class="min-h-screen bg-amber-50 dark:bg-stone-900 font-sans p-4 sm:p-8">
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- Header Section -->
        <div class="md:col-span-3 lg:col-span-4 bg-amber-200 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-45 -translate-x-1/2 -translate-y-1/2"></div>
            <div class="absolute bottom-0 right-0 w-24 h-24 bg-stone-500 dark:bg-stone-800 transform -rotate-45 translate-x-1/3 translate-y-1/3"></div>
            <div class="relative z-10 flex flex-col sm:flex-row justify-between items-start sm:items-center">
                <div>
                    <h1 class="text-3xl sm:text-4xl font-extrabold text-stone-800 dark:text-amber-50 mb-2">Welcome, Marketing Team!</h1>
                    <p class="text-stone-700 dark:text-amber-100 text-lg">Here's your dashboard overview for today.</p>
                </div>
                <div class="mt-4 sm:mt-0">
                    <button class="px-6 py-3 bg-stone-800 dark:bg-amber-50 text-amber-50 dark:text-stone-800 rounded-full font-semibold shadow-md hover:bg-stone-700 dark:hover:bg-amber-100 transition duration-300 relative overflow-hidden group">
                        <span class="relative z-10">New Report</span>
                        <div class="absolute inset-0 bg-stone-900 dark:bg-amber-100 transform -skew-x-12 scale-0 group-hover:scale-100 transition-transform duration-300 origin-left"></div>
                    </button>
                </div>
            </div>
        </div>

        <!-- Card 1: Sales Overview -->
        <div class="bg-amber-300 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-6 -right-8 w-24 h-24 bg-stone-500 dark:bg-amber-700 rounded-full"></div>
            <div class="absolute bottom-2 -left-6 w-32 h-16 bg-amber-400 dark:bg-stone-800 transform skew-y-6"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Total Sales</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$12,450</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+5.2% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 2: New Customers -->
        <div class="bg-stone-400 dark:bg-amber-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-24 h-24 bg-amber-500 dark:bg-stone-900 transform rotate-12 -translate-x-1/4 -translate-y-1/4"></div>
            <div class="absolute bottom-0 right-0 w-16 h-16 bg-stone-700 dark:bg-amber-500 rounded-full"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">New Customers</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">289</p>
                <div class="flex items-center text-red-700 dark:text-red-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414L9.414 17H13a1 1 0 010 2H9a1 1 0 01-1-1v-4a1 1 0 012 0v1.586l5.293-5.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">-1.5% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 3: Website Traffic -->
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-4 right-4 w-12 h-12 bg-amber-400 dark:bg-amber-600 transform rotate-45"></div>
            <div class="absolute bottom-0 left-0 w-16 h-16 bg-stone-500 dark:bg-stone-700 rounded-br-full"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Website Traffic</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">78,123</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+8.7% last month</span>
                </div>
            </div>
        </div>

        <!-- Card 4: Average Order Value (smaller, for lg screens) -->
        <div class="hidden lg:block bg-amber-100 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-20 h-20 bg-stone-400 dark:bg-amber-600 transform -rotate-45 translate-x-1/3 -translate-y-1/3"></div>
            <div class="absolute bottom-0 right-0 w-16 h-16 bg-amber-500 dark:bg-stone-900 transform rotate-45 translate-x-1/4 translate-y-1/4"></div>
            <div class="relative z-10">
                <h2 class="text-xl font-bold text-stone-800 dark:text-amber-50 mb-3">Average Order</h2>
                <p class="text-4xl font-extrabold text-stone-900 dark:text-amber-100 mb-4">$43.75</p>
                <div class="flex items-center text-green-700 dark:text-green-300">
                    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3H7a1 1 0 010-2h4a1 1 0 011 1v4a1 1 0 01-2 0V4.414l-5.293 5.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                    <span class="font-medium">+2.1% this month</span>
                </div>
            </div>
        </div>

        <!-- Large Card: Recent Activity -->
        <div class="md:col-span-2 bg-stone-300 dark:bg-stone-700 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-32 h-32 bg-amber-400 dark:bg-amber-600 transform rotate-12 translate-x-1/4 -translate-y-1/4"></div>
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Recent Activity</h2>
                <ul class="space-y-4">
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Jane Doe</span> purchased 'Product XYZ'</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">15 minutes ago</p>
                        </div>
                    </li>
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">John Smith</span> signed up for newsletter</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">1 hour ago</p>
                        </div>
                    </li>
                    <li class="flex items-center bg-amber-50 dark:bg-stone-800 p-3 rounded-lg shadow-sm border border-stone-400 dark:border-amber-50">
                        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Avatar">
                        <div>
                            <p class="text-stone-800 dark:text-amber-50"><span class="font-semibold">Emily White</span> reviewed 'Service ABC'</p>
                            <p class="text-sm text-stone-600 dark:text-amber-200">3 hours ago</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Large Card: Quick Links -->
        <div class="md:col-span-1 lg:col-span-2 bg-amber-200 dark:bg-stone-600 p-6 rounded-xl shadow-lg border-2 border-stone-800 dark:border-amber-50 relative overflow-hidden">
            <div class="absolute top-0 left-0 w-24 h-24 bg-stone-500 dark:bg-amber-700 transform skew-y-12 -translate-x-1/2"></div>
            <div class="absolute bottom-0 right-0 w-20 h-20 bg-amber-400 dark:bg-stone-800 rounded-tl-full"></div>
            <div class="relative z-10">
                <h2 class="text-2xl font-bold text-stone-800 dark:text-amber-50 mb-4">Quick Access</h2>
                <nav>
                    <ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 001.946.806L14.75 1.25M2 17.5V14h6v3.5l-2 2-2-2zM12 14v3.5l2 2 2-2V14h-4z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Analytics</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Messages</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-amber-300 dark:bg-stone-500 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM11 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Reports</span>
                            </a>
                        </li>
                        <li class="group">
                            <a href="#" class="flex items-center p-4 bg-stone-400 dark:bg-amber-600 rounded-lg shadow-md hover:scale-105 transition duration-300 border-2 border-transparent group-hover:border-stone-800 dark:group-hover:border-amber-50">
                                <svg class="w-6 h-6 text-stone-800 dark:text-amber-50 mr-3" fill="currentColor" viewBox="0 0 20 20"><path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zm-6 9A6 6 0 0012 9a6 6 0 00-6 6zM13 13.5a2.5 2.5 0 00-5 0M9 20a1 1 0 110-2h2a1 1 0 110 2H9z"></path></svg>
                                <span class="font-semibold text-stone-800 dark:text-amber-50">Settings</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

    </div>
</div>

Industrial_Sports_Dashboard

インダストリアルデザインスタイルのスポーツ/フィットネスアプリケーション向けの適度な複雑さのダッシュボードコンポーネントで、アースカラーとダークモードをサポートするレスポンシブレイアウトが特徴です。主要な指標、最近のアクティビティ、チーム/個人のパフォーマンスを表示します。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 text-stone-800 p-4 sm:p-6 lg:p-8 dark:bg-stone-900 dark:text-stone-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Main Content Area -->
    <div class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Header Section -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <div>
          <h1 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2">Team Performance Overview</h1>
          <p class="text-lg text-stone-600 dark:text-stone-400">Tracking collective progress and individual achievements.</p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center space-x-2">
          <button class="flex items-center px-4 py-2 bg-stone-700 text-white rounded-md hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:bg-stone-600 dark:hover:bg-stone-700">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
            Export Report
          </button>
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-700 dark:hover:bg-amber-800">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            New Activity
          </button>
        </div>
      </div>

      <!-- Key Metrics Section -->
      <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Total Workouts</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">1,234</p>
          <p class="text-xs text-green-600 dark:text-green-400 mt-2">+12% this month</p>
        </div>
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Avg. Intensity</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">8.5</p>
          <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2">Stable</p>
        </div>
        <div class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700 flex flex-col items-center justify-center text-center">
          <p class="text-sm text-stone-500 dark:text-stone-400 uppercase font-semibold mb-2">Team Stamina Score</p>
          <p class="text-5xl font-extrabold text-stone-900 dark:text-stone-100">92%</p>
          <p class="text-xs text-red-600 dark:text-red-400 mt-2">-2% since last week</p>
        </div>
      </section>

      <!-- Recent Activities Table -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Recent Activities</h2>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-stone-300 dark:divide-stone-700">
            <thead class="bg-stone-300 dark:bg-stone-700">
              <tr>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Activity</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Date</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Duration</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Participants</th>
                <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-stone-600 dark:text-stone-300 uppercase tracking-wider">Status</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-stone-200 dark:divide-stone-700">
              <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Strength Training</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-20</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">1h 30m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">8 players</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
                </td>
              </tr>
              <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Sprint Drills</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-19</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">0h 45m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">5 players</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
                </td>
              </tr>
               <tr>
                <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-stone-900 dark:text-stone-100">Team Strategy Meeting</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2023-11-18</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">2h 00m</td>
                <td class="px-4 py-4 whitespace-nowrap text-sm text-stone-600 dark:text-stone-400">Full Team</td>
                <td class="px-4 py-4 whitespace-nowrap">
                  <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-200 text-amber-800 dark:bg-amber-700 dark:text-amber-100">Scheduled</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- Performance Graphs Section -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-2xl font-bold text-stone-900 dark:text-stone-100 mb-4">Weekly Training Volume</h2>
        <img src="https://picsum.photos/800/300?random=1" alt="Placeholder graph for training volume" class="w-full h-auto rounded-md object-cover border border-stone-300 dark:border-stone-700">
        <p class="text-sm text-stone-600 dark:text-stone-400 mt-3">Represents total hours logged by the team each week.</p>
      </section>

    </div>

    <!-- Sidebar / Secondary Content Area -->
    <aside class="space-y-6">

      <!-- Player Spotlight Card -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Player Spotlight</h2>
        <div class="flex flex-col items-center">
          <img class="w-24 h-24 rounded-full object-cover border-4 border-stone-400 dark:border-stone-600 mb-4" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Player Avatar">
          <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-100 mb-1">Alex 'The Rocket' Smith</h3>
          <p class="text-sm text-stone-600 dark:text-stone-400 mb-3">Position: Forward</p>
          <div class="flex items-center space-x-2 text-sm text-stone-700 dark:text-stone-300">
            <svg class="w-4 h-4 text-amber-600 dark:text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>
            <span>Recent Best: 15.2 km in latest run</span>
          </div>
        </div>
      </section>

      <!-- Upcoming Events -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Upcoming Events</h2>
        <ul class="space-y-4">
          <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Nov<br>25
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Match vs. City Titans</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Arena Stadium, 7:00 PM</p>
            </div>
          </li>
          <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Dec<br>01
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Team Health Check-up</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Medical Center, 9:00 AM</p>
            </div>
          </li>
           <li class="flex items-start">
            <div class="flex-shrink-0 bg-amber-600 text-white rounded-full h-8 w-8 flex items-center justify-center text-sm font-bold">
              Dec<br>05
            </div>
            <div class="ml-3">
              <p class="font-semibold text-stone-900 dark:text-stone-100">Off-season Training Begins</p>
              <p class="text-sm text-stone-600 dark:text-stone-400">Training Ground</p>
            </div>
          </li>
        </ul>
      </section>

      <!-- Quick Links -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-4">Quick Links</h2>
        <ul class="space-y-3">
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
              Full Player Roster
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8V9m0 3v2m0 3.5V19M8.293 17.293A4 4 0 0118 10a4 4 0 01-11.707-2.707m-4.593 2.593c-.783.783-1.217 1.488-1.498 2.07-.15.318-.256.576-.328.783a.75.75 0 00-.001.077c.435.093.593.18.665.234a.75.75 0 00.323.076.75.75 0 00.12-.016c.395-.121.737-.306 1.05-.558c.28-.216.52-.469.72-.733.2-.264.36-.532.48-.795a.75.75 0 00.08-.168.75.75 0 00.04-1.072z"></path></svg>
              Injury Reports
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              Performance History
            </a>
          </li>
        </ul>
      </section>

    </aside>
  </div>
</div>

アールデコ調ソーシャルダッシュボード

デート/ソーシャルプラットフォーム向けの適度な複雑さのダッシュボードコンポーネントで、落ち着いた/彩度の低い色と完全な応答性を備えたアールデコ調のデザインスタイルが特徴です。プロファイルカード、アクティビティフィード、ナビゲーションが含まれ、ダークモードがサポートされています。

開けるプレビュー

                <div class="min-h-screen bg-stone-100 text-stone-800 font-serif dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8 px-4 py-3 bg-stone-200 dark:bg-stone-800 shadow-md rounded-lg border border-stone-300 dark:border-stone-700">
    <h1 class="text-2xl sm:text-3xl font-bold tracking-wider text-amber-800 dark:text-amber-500 uppercase">
      <span class="hidden sm:inline">The</span> Social Soiree
    </h1>
    <div class="flex items-center space-x-4">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
      </a>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
    </div>
  </header>

  <!-- Main Content Area -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

    <!-- Left Sidebar / Navigation -->
    <aside class="lg:col-span-1">
      <nav class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
              <span>My Profile</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2zm7-2h-4v2h4V9zm-4-3h4v2h-4V6z" clip-rule="evenodd"></path></svg>
              <span>Messages <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white bg-amber-600 rounded-full">3</span></span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0010.518 8H10a2 2 0 00-2 2H6a2 2 0 00-2-2h-.518C3.238 6.606 1.684 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4zM10 14a6 6 0 000-12H8a6 6 0 000 12h2zm-2 2a2 2 0 100-4 2 2 0 000 4zM12 4a4 4 0 100 8c1.684 0 3.238-.606 4.455-1.621A4.004 4.004 0 0014.518 8H14a2 2 0 00-2 2h-2a2 2 0 00-2-2h-.518C1.238 6.606 0 6 0 6s0 2 0 2h.518c.225-.972.637-1.895 1.13-2.732a3.996 3.996 0 015.352-1.282A4.004 4.004 0 008 4z" clip-rule="evenodd"></path></svg>
              <span>Matches</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 text-lg text-stone-700 dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-500 transition-colors duration-200 group">
              <svg class="w-6 h-6 group-hover:scale-110 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112.7 1.9L16 5.2a1 1 0 010 1.4L12.7 9.8a1 1 0 01-1.4-1.4L13.59 7H7a1 1 0 110-2h6.59l-2.29-2.29a1 1 0 010-1.414zM2 11h14a1 1 0 010 2H2a1 1 0 010-2z" clip-rule="evenodd"></path></svg>
              <span>Settings</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- Main Content / Profile Cards & Activity Feed -->
    <main class="lg:col-span-2 space-y-8">

      <!-- Discover New Profiles -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Discover New Profiles
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <!-- Profile Card 1 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Alice, 28</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Creative Soul</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 2 -->
          <div class="bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Ben, 31</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Adventurer</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 3 (hidden on smaller screens) -->
          <div class="hidden lg:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/15.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Chloe, 26</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Musician</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
          <!-- Profile Card 4 (hidden on smaller screens) -->
          <div class="hidden xl:block bg-stone-300 dark:bg-stone-700 rounded-lg shadow-inner overflow-hidden transform hover:scale-105 transition-transform duration-300 border-2 border-stone-400 dark:border-stone-600">
            <img src="https://randomuser.me/api/portraits/women/88.jpg" alt="Profile Image" class="w-full h-40 object-cover border-b-2 border-amber-600 dark:border-amber-400">
            <div class="p-4 text-center relative">
              <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100">Diana, 29</h3>
              <p class="text-sm text-stone-700 dark:text-stone-300">Philosopher</p>
              <div class="mt-3 flex justify-center space-x-2">
                <button class="p-2 rounded-full bg-amber-600 dark:bg-amber-400 text-white dark:text-stone-900 hover:bg-amber-700 dark:hover:bg-amber-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
                </button>
                <button class="p-2 rounded-full bg-stone-500 dark:bg-stone-600 text-white hover:bg-stone-600 dark:hover:bg-stone-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2">
                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.214 3.737C8.423 4.298 7.551 4.707 6.643 4.977l-.608-.608c-.768-.768-2.146-.768-2.914 0-.768.768-.768 2.146 0 2.914l.608.608C3.707 7.551 4.298 8.423 4.859 9.214L10 14.355l5.141-5.141C15.702 8.449 16.293 7.577 16.643 6.669l.608-.608c.768-.768.768-2.146 0-2.914-.768-.768-2.146-.768-2.914 0l-.608.608C12.449 3.707 11.577 3.298 10.786 2.737L10 2.102l-.786.635z" /></svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity Feed -->
      <section class="bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-stone-300 dark:border-stone-700">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 text-amber-800 dark:text-amber-500 border-b-2 border-amber-600 dark:border-amber-400 pb-2">
          Recent Activity
        </h2>
        <div class="space-y-6">
          <!-- Activity Item 1 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Sophia</span> liked your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">2 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 2 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Leo</span> sent you a new message.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">4 hours ago</span>
            </div>
          </div>
          <!-- Activity Item 3 -->
          <div class="flex items-start space-x-4 pb-4 border-b border-stone-300 dark:border-stone-700 last:border-b-0 last:pb-0">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-600 dark:border-amber-400 object-cover">
            <div class="flex-1">
              <p class="text-stone-900 dark:text-stone-100"><span class="font-semibold">Isabella</span> viewed your profile.</p>
              <span class="text-xs text-stone-600 dark:text-stone-400">1 day ago</span>
            </div>
          </div>
        </div>
      </section>

    </main>
  </div>
</div>

ダッシュボードコンポーネント

ポートフォリオ用のシンプルなモノクロダークモードダッシュボードコンポーネントで、Tailwind CSS で構築されています。レスポンシブデザインが特徴で、単色のさまざまな色合いを使用して、なめらかでミニマルな外観になっています。

開けるプレビュー

                <div class="min-h-screen bg-gray-900 text-gray-100 p-8">
    <div class="max-w-7xl mx-auto">
        <h1 class="text-4xl font-bold mb-8 text-gray-500">Dashboard</h1>

        <!-- Stats Section -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Projects Completed</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">42</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Clients</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">15</p>
            </div>
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
                <h2 class="text-xl font-semibold text-gray-400">Awards</h2>
                <p class="text-5xl font-bold text-gray-300 mt-2">3</p>
            </div>
        </div>

        <!-- Recent Work Section -->
        <div class="bg-gray-800 p-8 rounded-lg shadow-lg mb-12">
            <h2 class="text-3xl font-semibold text-gray-400 mb-6">Recent Work</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project1/400/250" alt="Project 1" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Alpha</h3>
                        <p class="text-gray-400 mt-2">A sleek web design for a tech startup.</p>
                    </div>
                </div>
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project2/400/250" alt="Project 2" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Beta</h3>
                        <p class="text-gray-400 mt-2">Mobile app development for an e-commerce brand.</p>
                    </div>
                </div>
                <div class="bg-gray-700 rounded-lg overflow-hidden shadow-md">
                    <img src="https://picsum.photos/seed/project3/400/250" alt="Project 3" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="text-xl font-semibold text-gray-300">Project Gamma</h3>
                        <p class="text-gray-400 mt-2">Branding and logo design for a local business.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Testimonials Section -->
        <div class="bg-gray-800 p-8 rounded-lg shadow-lg">
            <h2 class="text-3xl font-semibold text-gray-400 mb-6">Testimonials</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client 1" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold text-gray-300">John Doe</p>
                            <p class="text-sm text-gray-400">CEO, Tech Solutions</p>
                        </div>
                    </div>
                    <p class="text-gray-400 italic">"The work delivered was exceptional and exceeded our expectations. Highly recommend!"</p>
                </div>
                <div class="bg-gray-700 p-6 rounded-lg shadow-md">
                    <div class="flex items-center mb-4">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client 2" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <p class="font-semibold text-gray-300">Jane Smith</p>
                            <p class="text-sm text-gray-400">Marketing Director, Global Corp</p>
                        </div>
                    </div>
                    <p class="text-gray-400 italic">"Professional, timely, and truly understood our vision. A pleasure to work with."</p>
                </div>
            </div>
        </div>
    </div>
</div>

ダッシュボードコンポーネント

ポートフォリオの展示用に設計されたシンプルで応答性の高いダッシュボードコンポーネントで、マイクロインタラクションを使用し、アースカラーに焦点を当てています。Tailwind CSSを使用したダークテーマをサポートしています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 p-6">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Portfolio Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=2" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-850 rounded-lg shadow overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
            <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=3" alt="Portfolio Item">
            <div class="p-4">
                <h2 class="font-bold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project showcasing key details.</p>
            </div>
        </div>
    </div>
    <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
        <p>Created by <a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Your Name</a></p>
    </footer>
</div>

レトロビジネスダッシュボード

ビジネス/企業のWebサイト向けのレトロ/ビンテージグレースケールダッシュボードコンポーネントで、適度な複雑さとレスポンシブデザインを備えています。スタイリングにTailwind CSS dark:プレフィックスを使用してダークテーマをサポートします。画像はpicsum.photosと randomuser.me のアバターから提供されました。

開けるプレビュー

                <div class="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-sans min-h-screen p-8">
    <div class="container mx-auto">
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl font-bold">Dashboard</h1>
            <div class="flex items-center space-x-4">
                <input type="text" placeholder="Search..." class="p-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            </div>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Sales Overview</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Recent Activity</h2>
                <ul class="space-y-2">
                    <li class="flex justify-between"><span>New Order</span><span>$250</span></li>
                    <li class="flex justify-between"><span>Product View</span><span>Widget X</span></li>
                    <li class="flex justify-between"><span>User Login</span><span>Admin</span></li>
                </ul>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6">
                <h2 class="text-xl font-semibold mb-4">Traffic Sources</h2>
                <div class="h-40 bg-gray-300 dark:bg-gray-600 rounded"></div>
            </div>

            
            <div class="bg-white dark:bg-gray-700 shadow-md rounded-lg p-6 md:col-span-2 lg:col-span-3">
                <h2 class="text-xl font-semibold mb-4">Performance Metrics</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <h3 class="text-lg">Revenue</h3>
                        <p class="text-2xl font-bold">$12,345</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Visitors</h3>
                        <p class="text-2xl font-bold">5,678</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Orders</h3>
                        <p class="text-2xl font-bold">901</p>
                    </div>
                    <div>
                        <h3 class="text-lg">Conversion</h3>
                        <p class="text-2xl font-bold">10.5%</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

ダッシュボードコンポーネント

ビジネスや企業のWebサイト向けに設計されたレトロなダッシュボードコンポーネントで、80年代/90年代の美学とモダンなレイアウトと配色を組み合わせています。レスポンシブでダークテーマをサポートし、統計のカード、ユーザープロファイルなどのインタラクティブな要素を備えています。

開けるプレビュー

                <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>

Brutalist Grayscale Dashboard コンポーネント

ビジネス/企業のWebサイト向けのシンプルなブルータリズムスタイルのグレースケールダッシュボードレイアウトで、ダークモードをサポートし、Tailwind CSSで構築されています。

開けるプレビュー

                <section class="dashboard-component bg-white dark:bg-gray-900 text-black dark:text-white p-8 border-4 border-black dark:border-white">
  <div class="max-w-7xl mx-auto">
    <!-- Banner -->
    <div class="mb-8 border-4 border-black dark:border-white">
      <img src="https://picsum.photos/1200/200" alt="Dashboard Banner" class="w-full h-40 object-cover">
    </div>
    <!-- Header -->
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-3xl font-extrabold">Company Dashboard</h1>
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-4 border-black dark:border-white">
    </div>
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Total Sales</h2>
        <p class="text-2xl">67,890</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">New Users</h2>
        <p class="text-2xl">1,234</p>
      </div>
      <div class="p-6 bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white transform odd:translate-y-2 even:-translate-y-2">
        <h2 class="text-xl font-bold mb-2">Performance</h2>
        <p class="text-2xl">78%</p>
      </div>
    </div>
  </div>
</section>

ダッシュボードコンポーネント

3Dデザインとパステルカラーの配色、レスポンシブ、ダークモードをサポートするシンプルなダッシュボードコンポーネント。

開けるプレビュー

                <div class="flex flex-wrap bg-gray-100 dark:bg-gray-900">
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-blue rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-users fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Users</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">2,156 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 10%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-pink rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-chart-line fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Sales</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$5,340 <span class="text-pastel-red text-base"><i class="fas fa-arrow-down"></i> 5%</span></p>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full md:w-1/2 xl:w-1/3 p-6">
    <div class="bg-white dark:bg-gray-800 border-b-4 border-pastel-yellow rounded-lg shadow-xl px-5 py-4">
      <div class="flex flex-row items-center">
        <div class="flex-shrink pr-4">
          <div class="rounded-full p-5 bg-gray-200 dark:bg-gray-700">
            <i class="fas fa-wallet fa-2x fa-inverse text-gray-700 dark:text-gray-200"></i>
          </div>
        </div>
        <div class="flex-1 text-right md:text-center">
          <h2 class="font-bold uppercase text-gray-600 dark:text-gray-400">Total Revenue</h2>
          <p class="font-bold text-3xl text-gray-800 dark:text-gray-200">$1,234 <span class="text-pastel-green text-base"><i class="fas fa-arrow-up"></i> 12%</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

ダッシュボードコンポーネント

Tailwind CSSを使用して構築された、マイクロインタラクションとトライアドカラースキームを特徴とするソーシャルメディアアプリケーション用のレスポンシブダッシュボードコンポーネント。

開けるプレビュー

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-teal-400 dark:bg-teal-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://picsum.photos/50/50" alt="Profile" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Engagement</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Check how users interact with your posts.</p>
            </div>
        </div>
        <div class="bg-orange-400 dark:bg-orange-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">New Followers</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">See your growth in followers over time.</p>
            </div>
        </div>
        <div class="bg-purple-400 dark:bg-purple-600 hover:scale-105 transition-transform duration-200 p-4 rounded-lg flex items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="rounded-full mr-3">
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Post Performance</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Evaluate the performance of your latest posts.</p>
            </div>
        </div>
    </div>
</div>

検索コンポーネント

カテゴリ

ダッシュ ボード

ダッシュボード