Rechercher des composants

Catégories

Tableaux

Affichage visuel des indicateurs clés de performance

Composant du tableau de bord des crypto-monnaies

Un composant de tableau de bord de crypto-monnaie complexe et réactif avec un style de conception de typographie suisse/internationale, avec des éléments de dégradé multicolores et la prise en charge du mode sombre. Il comprend plusieurs sections telles qu’un aperçu du portefeuille, les tendances du marché, les transactions récentes et un graphique.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">

  <!-- Header Section -->
  <header class="flex flex-col sm:flex-row justify-between items-center mb-6 lg:mb-8 font-mono">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 sm:mb-0 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-red-300 dark:via-yellow-300 dark:to-blue-300">
      CRYPTO DASHBOARD
    </h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 px-4 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base">
        <svg class="w-5 h-5 absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button class="p-2 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 hover:ring-2 hover:ring-blue-500 focus:outline-none">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
      </button>
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">

    <!-- Portfolio Overview Card -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-300 dark:to-pink-300 capitalize">My Portfolio</h2>
        <button class="text-sm text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">View All</button>
      </div>
      <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="p-4 rounded-lg border-2 border-transparent bg-gradient-to-br from-green-400 to-blue-500 dark:from-green-600 dark:to-blue-700 shadow-lg group">
          <p class="text-lg sm:text-xl font-semibold text-white">Total Balance</p>
          <p class="text-3xl sm:text-4xl font-bold text-white mt-1">$12,345.67</p>
          <span class="text-green-100 text-sm sm:text-base">+5.21% Today</span>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Bitcoin (BTC)</p>
            <p class="text-xl font-bold dark:text-gray-50">$34,567.89</p>
          </div>
          <div class="text-right">
            <span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+1.23%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~0.5 BTC</p>
          </div>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ethereum (ETH)</p>
            <p class="text-xl font-bold dark:text-gray-50">$2,100.25</p>
          </div>
          <div class="text-right">
            <span class="text-red-500 dark:text-red-400 text-sm sm:text-base">-0.87%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~2.0 ETH</p>
          </div>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ripple (XRP)</p>
            <p class="text-xl font-bold dark:text-gray-50">$0.75</p>
          </div>
          <div class="text-right">
            <span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+3.45%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~1000 XRP</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Market Trends / Price Chart Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-300 dark:to-red-300 capitalize">Market Trends</h2>
        <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none focus:outline-none">
          <option>1 Day</option>
          <option>1 Week</option>
          <option>1 Month</option>
        </select>
      </div>
      <div class="flex-grow flex items-center justify-center">
        <!-- Placeholder for Chart -->
        <img src="https://picsum.photos/400/300?random=1" alt="Placeholder Chart" class="w-full h-auto rounded-md shadow-inner object-cover dark:filter dark:brightness-75">
      </div>
      <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">BTC/USD Price Chart</div>
    </div>

    <!-- Recent Transactions Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 lg:col-span-2">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500 dark:from-teal-300 dark:to-cyan-300 capitalize">Recent Transactions</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Currency</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+0.012 BTC</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">BTC</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</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-100 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 text-red-500 dark:text-red-400">Sell</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">-0.5 ETH</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">ETH</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</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-100 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 text-green-500 dark:text-green-400">Buy</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+100 XRP</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">XRP</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Quick Actions Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-300 dark:to-purple-300 capitalize">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-700 text-blue-800 dark:text-blue-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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 8h6m-5 0H7M9 8V5a2 2 0 012-2h4a2 2 0 012 2v3m-7 0L4 16m4-8l-.75 4M14 5v10m-3-4h.01M12 16l4-8m-3 8h.01"></path></svg>
          Buy
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-700 text-red-800 dark:text-red-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
          Sell
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-yellow-100 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-700 text-yellow-800 dark:text-yellow-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
          Send
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-green-100 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-700 text-green-800 dark:text-green-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          Receive
        </button>
      </div>
    </div>

  </div>

  <!-- Footer/Disclaimer (Optional) -->
  <footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Crypto Dashboard. All rights reserved. Data is for informational purposes only. </p>
  </footer>
</div>

Neumorphic_Forum_Dashboard

Un composant de tableau de bord neumorphique simple et réactif avec une palette de couleurs forêt/vert, conçu pour les plateformes de forum et de communauté, et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-green-50 to-green-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">

    <!-- Main Neumorphic Card -->
    <div class="bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-800 dark:to-gray-700 shadow-xl shadow-green-200/50 dark:shadow-gray-950/50 rounded-3xl p-6 sm:p-8 md:p-10 transition-all duration-300 ease-in-out">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-green-800 dark:text-green-300 mb-6 text-center">Forum Dashboard</h1>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Discussions Card -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
          <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Latest Discussions</h2>
          <ul class="space-y-3">
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"New ideas for community events"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">3h ago</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"Feedback on the new forum features"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">1d ago</span>
              </a>
            </li>
            <li>
              <a href="#" class="block p-3 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 flex items-center group transition-all duration-200 ease-in-out hover:bg-green-100 dark:hover:bg-gray-700 hover:scale-105">
                <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-9 h-9 rounded-full mr-3 border-2 border-green-300 dark:border-green-600">
                <span class="flex-1 text-green-800 dark:text-gray-300 group-hover:text-green-900 dark:group-hover:text-green-400 text-sm sm:text-base">"General chat about web development"</span>
                <span class="text-xs text-green-600 dark:text-green-500 ml-2">2d ago</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- Quick Stats Card -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-2xl p-5 shadow-inner shadow-green-50/50 dark:shadow-gray-900/50 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-green-200/50 dark:hover:shadow-gray-900/50">
          <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-3">Community Stats</h2>
          <div class="grid grid-cols-2 gap-4">
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">1,234</p>
              <p class="text-sm text-green-700 dark:text-green-400">Total Users</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">567</p>
              <p class="text-sm text-green-700 dark:text-green-400">Active Today</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">89</p>
              <p class="text-sm text-green-700 dark:text-green-400">New Topics</p>
            </div>
            <div class="p-4 bg-green-50 dark:bg-gray-600 rounded-xl shadow-md shadow-green-100/50 dark:shadow-gray-800/50 text-center transition-all duration-200 ease-in-out hover:scale-105">
              <p class="text-3xl font-bold text-green-800 dark:text-green-300">2,456</p>
              <p class="text-sm text-green-700 dark:text-green-400">Total Posts</p>
            </div>
          </div>
        </div>

      </div>

      <!-- Call to Action / Button -->
      <div class="mt-8 text-center">
        <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-green-400 to-green-600 group-hover:from-green-400 group-hover:to-green-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 transition-all duration-300 ease-in-out shadow-lg shadow-green-400/50 dark:shadow-green-800/50 active:shadow-inner active:shadow-green-500/50 dark:active:shadow-green-900/50">
          <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-gradient-to-br from-green-100 to-green-200 dark:from-gray-700 dark:to-gray-600 rounded-md group-hover:from-green-400 group-hover:to-green-600 group-hover:bg-opacity-0">
            Start New Discussion
          </span>
        </button>
      </div>

    </div>

  </div>
</div>

Composant de tableau de bord Luxury/Premium Marketplace

Un composant de tableau de bord complexe et réactif pour une place de marché multifournisseur avec un style de design luxueux/haut de gamme. Dispose d’une palette de couleurs bleue d’entreprise professionnelle, d’une typographie sophistiquée et d’une prise en charge du mode sombre. Comprend des sections pour une vue d’ensemble, les ventes récentes, les meilleurs produits et des statistiques rapides.

Ouvrir Aperçu

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

  <!-- Header -->
  <header class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 lg:mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 sm:mb-0">Vendor Dashboard</h1>
    <div class="flex items-center space-x-3">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 pl-4 pr-10 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm w-40 sm:w-64">
        <svg class="w-5 h-5 text-gray-400 absolute right-3 top-1/2 transform -translate-y-1/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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button class="p-2 rounded-full bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200">
        <svg class="w-6 h-6" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
      </button>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">

    <!-- Quick Stats Cards (Col Span 4 on Lg, 2 on Md) -->
    <div class="lg:col-span-4 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      <!-- Stat Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Total Sales</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">$12,450.75</h3>
        </div>
        <svg class="w-10 h-10 text-blue-500 dark:text-blue-400 opacity-70" 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="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
      </div>
      <!-- Stat Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Orders Today</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">58</h3>
        </div>
        <svg class="w-10 h-10 text-green-500 dark:text-green-400 opacity-70" 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>
      </div>
      <!-- Stat Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">New Customers</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">12</h3>
        </div>
        <svg class="w-10 h-10 text-purple-500 dark:text-purple-400 opacity-70" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857m7.5 1.857H10M11 12a4 4 0 11-8 0 4 4 0 018 0zm6 0a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
      </div>
      <!-- Stat Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-5 flex items-center justify-between transition-transform transform hover:scale-105">
        <div>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider font-semibold mb-1">Product Views</p>
          <h3 class="text-3xl font-bold text-blue-800 dark:text-blue-300">2,104</h3>
        </div>
        <svg class="w-10 h-10 text-orange-500 dark:text-orange-400 opacity-70" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </div>
    </div>

    <!-- Recent Sales Chart/Table -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Recent Sales</h2>

      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Order ID</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700 text-sm">
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45678</td>
              <td class="px-4 py-4 whitespace-nowrap">Luxury Watch</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$899.00</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-100 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-blue-700 dark:text-blue-400 font-medium">#45677</td>
              <td class="px-4 py-4 whitespace-nowrap">Designer Handbag</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$549.50</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-100 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-blue-700 dark:text-blue-400 font-medium">#45676</td>
              <td class="px-4 py-4 whitespace-nowrap">Premium Coffee Maker</td>
              <td class="px-4 py-4 whitespace-nowrap text-yellow-600 dark:text-yellow-400 font-bold">$220.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span></td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-blue-700 dark:text-blue-400 font-medium">#45675</td>
              <td class="px-4 py-4 whitespace-nowrap">Acoustic Guitar</td>
              <td class="px-4 py-4 whitespace-nowrap text-green-600 dark:text-green-400 font-bold">$780.00</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-100 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-blue-700 dark:text-blue-400 font-medium">#45674</td>
              <td class="px-4 py-4 whitespace-nowrap">Smart Home Hub</td>
              <td class="px-4 py-4 whitespace-nowrap text-red-600 dark:text-red-400 font-bold">$150.00</td>
              <td class="px-4 py-4 whitespace-nowrap"><span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100">Cancelled</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">View All Sales</a></button>
    </section>

    <!-- Top Selling Products -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Top Selling Products</h2>
      <div class="space-y-4">
        <!-- Product Item 1 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Watch" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Luxury Swiss Watch</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>150</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$899.00</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="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></button>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Product Item 2 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Handbag" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Italian Leather Handbag</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>120</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$549.50</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="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></button>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Product Item 3 -->
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Camera" class="w-20 h-20 rounded-lg object-cover shadow-sm">
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-gray-100">Professional DSLR Camera</h3>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Sold: <span>90</span> units</p>
            <p class="text-blue-700 dark:text-blue-300 font-bold">$1,200.00</p>
          </div>
          <button class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"><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="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></button>
        </div>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Manage Products</a></button>
    </section>

    <!-- Customer Reviews / Feedback -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">Customer Feedback</h2>
      <div class="space-y-5">
        <!-- Review 1 -->
        <div class="flex items-start space-x-4">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Emily R.</p>
            <div class="flex items-center text-yellow-500 text-sm mb-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Absolutely love the quality of products! Fast shipping and excellent customer service. Highly recommend this marketplace."</p>
          </div>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Review 2 -->
        <div class="flex items-start space-x-4">
          <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Customer Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600">
          <div class="flex-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">David S.</p>
            <div class="flex items-center text-yellow-500 text-sm mb-1">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">"Great platform for unique items. Had a slight issue with delivery but customer support resolved it quickly and professionally."</p>
          </div>
        </div>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg border border-blue-500 text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors duration-200 font-semibold"><a href="#">Read All Reviews</a></button>
    </section>

    <!-- To-Do List -->
    <section class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-200 mb-6">To-Do List</h2>
      <div class="space-y-4">
        <!-- Task 1 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Respond to customer inquiries</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 2 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500" checked>
          <span class="text-gray-500 dark:text-gray-400 text-base line-through">Update product listings photos</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 3 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Prepare monthly sales report</span>
        </label>
        <hr class="border-gray-200 dark:border-gray-700">
        <!-- Task 4 -->
        <label class="flex items-center space-x-3 cursor-pointer">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded-md border-gray-300 dark:border-gray-600 focus:ring-blue-500">
          <span class="text-gray-800 dark:text-gray-200 text-base">Plan next marketing campaign</span>
        </label>
      </div>
      <button class="mt-6 w-full py-3 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition-colors duration-200 font-semibold"><a href="#">Add New Task</a></button>
    </section>

  </div>

</div>

Dashboard_Weather_Climate_Swiss

Un composant complexe et réactif du tableau de bord météo et climatique inspiré de la typographie suisse/internationale, utilisant des tons de terre et prenant en charge le mode sombre. Dispose de plusieurs points de données tels que la météo actuelle, les prévisions, la qualité de l’air et les tendances climatiques.

Ouvrir Aperçu

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

  <header class="mb-8 sm:mb-10 lg:mb-12">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-stone-900 dark:text-stone-100 tracking-tight mb-2">
      Climate Dashboard
    </h1>
    <p class="text-lg sm:text-xl text-stone-600 dark:text-stone-400">Comprehensive Weather & Climate Insights</p>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8">

    <!-- Current Weather Card -->
    <section class="md:col-span-2 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col justify-between overflow-hidden relative">
      <div class="absolute top-0 left-0 w-full h-full bg-cover bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/weather_current/1200/800');"></div>
      <div class="relative z-10">
        <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Current Conditions</h2>
        <div class="flex items-center justify-between flex-wrap gap-4 mb-6">
          <div class="flex items-center gap-4">
            <img src="https://openweathermap.org/img/wn/04d.png" alt="Cloudy" class="w-16 h-16 sm:w-20 sm:h-20">
            <div>
              <p class="text-5xl sm:text-6xl font-bold text-stone-900 dark:text-stone-100">22°C</p>
              <p class="text-xl text-stone-700 dark:text-stone-300">Partly Cloudy</p>
            </div>
          </div>
          <div class="text-right">
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Humidity:</span> 65%</p>
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Wind:</span> 12 km/h NE</p>
            <p class="text-lg text-stone-700 dark:text-stone-300"><span class="font-medium">Pressure:</span> 1012 hPa</p>
          </div>
        </div>
        <p class="text-md text-stone-600 dark:text-stone-400">Updated: Just now</p>
        <p class="mt-2 text-md font-medium text-stone-700 dark:text-stone-300">Location: Zurich, Switzerland</p>
      </div>
    </section>

    <!-- 5-Day Forecast Card -->
    <section class="md:col-span-1 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg overflow-hidden">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">5-Day Forecast</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <!-- Day 1 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Today</p>
          <img src="https://openweathermap.org/img/wn/04d.png" alt="Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">24° / 15°</p>
        </div>
        <!-- Day 2 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Tomorrow</p>
          <img src="https://openweathermap.org/img/wn/01d.png" alt="Sun" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">26° / 16°</p>
        </div>
        <!-- Day 3 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Thu</p>
          <img src="https://openweathermap.org/img/wn/10d.png" alt="Rain" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">20° / 13°</p>
        </div>
        <!-- Day 4 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Fri</p>
          <img src="https://openweathermap.org/img/wn/03d.png" alt="Partly Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">21° / 14°</p>
        </div>
        <!-- Day 5 -->
        <div class="flex flex-col items-center p-3 rounded-lg bg-stone-100 dark:bg-stone-700">
          <p class="font-medium text-stone-800 dark:text-stone-200">Sat</p>
          <img src="https://openweathermap.org/img/wn/02d.png" alt="Few Clouds" class="w-10 h-10">
          <p class="text-stone-700 dark:text-stone-300">23° / 15°</p>
        </div>
      </div>
    </section>

    <!-- Climate Trends Card -->
    <section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Climate Trends</h2>
      <div class="space-y-4">
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Average Temperature</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-amber-600 h-2.5 rounded-full" style="width: 70%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+0.8°C vs. Historical Average</p>
        </div>
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Precipitation Anomaly</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-blue-600 h-2.5 rounded-full" style="width: 60%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">-15% vs. Historical Average</p>
        </div>
        <div>
          <p class="text-lg font-medium text-stone-800 dark:text-stone-200 mb-1">Extreme Weather Events</p>
          <div class="w-full bg-stone-200 dark:bg-stone-700 rounded-full h-2.5">
            <div class="bg-red-600 h-2.5 rounded-full" style="width: 40%;"></div>
          </div>
          <p class="text-sm text-stone-600 dark:text-stone-400 mt-1">+5% Increase Annually</p>
        </div>
      </div>
      <button class="mt-6 w-full py-2 px-4 bg-lime-700 hover:bg-lime-800 dark:bg-lime-600 dark:hover:bg-lime-700 text-white font-medium rounded-lg transition-colors">
        View Full Report
      </button>
    </section>

    <!-- Air Quality Index Card -->
    <section class="md:col-span-1 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg flex flex-col">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Air Quality Index (AQI)</h2>
      <div class="flex items-center justify-between mb-4 flex-grow">
        <div class="text-center flex-1">
          <p class="text-5xl font-bold text-emerald-600 dark:text-emerald-400">45</p>
          <p class="text-lg text-emerald-700 dark:text-emerald-300">Good</p>
        </div>
        <div class="text-left flex-1 pl-4 border-l border-stone-200 dark:border-stone-700">
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">PM2.5:</span> 12 µg/m³</p>
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">Ozone:</span> 35 ppb</p>
          <p class="text-md text-stone-700 dark:text-stone-300"><span class="font-medium">NO2:</span> 5 ppb</p>
        </div>
      </div>
      <p class="text-sm text-stone-600 dark:text-stone-400 text-center mt-2">Data from local monitoring station</p>
    </section>

    <!-- Global Anomalies Card -->
    <section class="md:col-span-3 lg:col-span-2 p-6 rounded-xl bg-stone-50 dark:bg-stone-800 shadow-lg">
      <h2 class="text-2xl sm:text-3xl font-semibold text-stone-900 dark:text-stone-100 mb-4">Global Anomalies & Alerts</h2>
      <ul class="space-y-4">
        <li class="flex items-start gap-3">
          <span class="text-red-500 text-2xl">&#9888;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Heatwave warning for Southern Europe</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Temperatures expected to exceed 40°C for next 7 days.</p>
          </div>
        </li>
        <li class="flex items-start gap-3">
          <span class="text-blue-500 text-2xl">&#x2139;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Increased Arctic ice melt observed</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Satellite data shows record low sea ice extent for the season.</p>
          </div>
        </li>
        <li class="flex items-start gap-3">
          <span class="text-yellow-500 text-2xl">&#9937;</span>
          <div>
            <p class="font-medium text-stone-800 dark:text-stone-200">Pacific Ocean SST trending towards El Niño</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Potential for altered global weather patterns in coming months.</p>
          </div>
        </li>
      </ul>
    </section>

  </div>

  <footer class="mt-10 pt-6 border-t border-stone-300 dark:border-stone-700 text-center text-stone-600 dark:text-stone-400 text-sm">
    <p>&copy; 2023 Climate Insights. All rights reserved.</p>
  </footer>

</div>

Brutalist_Dating_Dashboard

Un composant de tableau de bord de style brutaliste pour les plateformes de rencontres et les réseaux sociaux, avec un design audacieux, un contraste élevé et une palette de couleurs violet/violet. Réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-purple-100 dark:bg-gray-900 text-purple-900 dark:text-purple-100 font-mono p-4 sm:p-8">

  <!-- Brutalist Header -->
  <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center py-4 border-b-4 border-purple-900 dark:border-purple-600 mb-8">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold uppercase tracking-wide leading-none mb-4 sm:mb-0">
      <span class="block -skew-x-12 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 mr-2 inline-block">Crush</span><span class="block sm:inline-block">Link</span>
    </h1>
    <nav class="text-lg sm:text-xl font-bold flex flex-wrap gap-x-6 gap-y-2 uppercase">
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Profiles
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Messages
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Likes
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
      <a href="#" class="relative group hover:text-purple-700 dark:hover:text-purple-300 transition-colors duration-200">
        Settings
        <span class="absolute bottom-0 left-0 w-full h-1 bg-purple-900 dark:bg-purple-600 scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-300"></span>
      </a>
    </nav>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">

    <!-- Left Sidebar / Profile Section -->
    <section class="md:col-span-1 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
      <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">My Profile</h2>
      <div class="flex flex-col items-center text-center">
        <div class="w-32 h-32 sm:w-40 sm:h-40 bg-purple-500 dark:bg-purple-900 border-4 border-purple-900 dark:border-purple-600 overflow-hidden relative mb-4 flex items-center justify-center">
          <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Profile Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
          <div class="absolute bottom-2 right-2 w-6 h-6 sm:w-8 sm:h-8 bg-green-500 border-2 border-purple-900 dark:border-purple-600"></div>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold mb-2 uppercase">Synthya 'Violet' Wave</h3>
        <p class="text-lg sm:text-xl font-bold mb-4 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-3 py-1 -skew-x-12 inline-block">28, Musician</p>
        <p class="text-base mb-6 italic">"Seeking a connection as deep as a synth bassline. Let's make some noise together."</p>
        <div class="flex gap-4">
          <button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Edit Profile</button>
          <button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View Public</button>
        </div>
      </div>
    </section>

    <!-- Main Content Area -->
    <section class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">

      <!-- New Matches / Recommendations -->
      <div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">New Crushes</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

          <!-- Match Card 1 -->
          <article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
            <div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
              <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
            </div>
            <h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Alex 'Byte' Flow</h3>
            <p class="text-sm mb-3">29, Developer</p>
            <button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
          </article>

          <!-- Match Card 2 -->
          <article class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 flex flex-col items-center text-center shadow-[4px_4px_0px_0px_rgba(76,29,149,1)] dark:shadow-[4px_4px_0px_0px_rgba(168,85,247,1)]">
            <div class="w-24 h-24 sm:w-28 sm:h-28 bg-purple-700 dark:bg-purple-700 border-2 border-purple-900 dark:border-purple-600 overflow-hidden mb-3 relative flex items-center justify-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-300">
              <div class="absolute bottom-1 right-1 w-4 h-4 bg-green-500 border border-purple-900 dark:border-purple-600"></div>
            </div>
            <h3 class="text-lg sm:text-xl font-bold uppercase mb-1 bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Luna 'Rift' Star</h3>
            <p class="text-sm mb-3">31, Artist</p>
            <button class="px-3 py-1 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[2px_2px_0px_0px_#4c1d95] dark:shadow-[2px_2px_0px_0px_#a855f7]">Connect</button>
          </article>

        </div>
        <button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Discover More</button>
      </div>

      <!-- Recent Activity / Messages -->
      <div class="bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Recent Waves</h2>
        <ul class="space-y-4">

          <!-- Activity Item 1 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Kai 'Glitch' Spark</p>
              <p class="text-sm mt-1">Sent you a <span class="font-bold text-purple-900 dark:text-purple-300">new message</span>: "Hey, loved your bio! Wanna chat?"</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">2 minutes ago</span>
            </div>
          </li>

          <!-- Activity Item 2 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/women/33.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Zara 'Pulse' Beat</p>
              <p class="text-sm mt-1">Liked your <span class="font-bold text-purple-900 dark:text-purple-300">recent photo</span>.</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">1 hour ago</span>
            </div>
          </li>

          <!-- Activity Item 3 -->
          <li class="flex items-start gap-3 p-3 bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 sm:w-16 sm:h-16 border-2 border-purple-900 dark:border-purple-600 object-cover grayscale hover:grayscale-0 transition-all duration-300">
            <div>
              <p class="font-bold text-lg uppercase bg-purple-900 dark:bg-purple-600 text-purple-100 dark:text-purple-900 px-2 -skew-x-6 inline-block">Neo 'Code' Matrix</p>
              <p class="text-sm mt-1">Viewed your <span class="font-bold text-purple-900 dark:text-purple-300">profile</span>.</p>
              <span class="text-xs text-purple-800 dark:text-purple-200 block mt-1">5 hours ago</span>
            </div>
          </li>

        </ul>
        <button class="mt-6 w-full px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">View All Activity</button>
      </div>

      <!-- Statistics / Quick Links -->
      <div class="lg:col-span-2 bg-purple-300 dark:bg-purple-800 border-4 border-purple-900 dark:border-purple-600 p-4 sm:p-6 shadow-[8px_8px_0px_0px_rgba(76,29,149,1)] dark:shadow-[8px_8px_0px_0px_rgba(168,85,247,1)]">
        <h2 class="text-2xl sm:text-3xl font-extrabold mb-4 uppercase">Your Stats // Quick Access</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <!-- Stat Card 1 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">42</p>
            <p class="text-sm sm:text-base uppercase">New Likes</p>
          </div>
          <!-- Stat Card 2 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">18</p>
            <p class="text-sm sm:text-base uppercase">Unread Messages</p>
          </div>
          <!-- Stat Card 3 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">5</p>
            <p class="text-sm sm:text-base uppercase">New Matches</p>
          </div>
          <!-- Stat Card 4 -->
          <div class="bg-purple-500 dark:bg-purple-900 border-2 border-purple-900 dark:border-purple-600 p-3 text-center shadow-[2px_2px_0px_0px_rgba(76,29,149,1)] dark:shadow-[2px_2px_0px_0px_rgba(168,85,247,1)]">
            <p class="text-4xl sm:text-5xl font-extrabold text-purple-900 dark:text-purple-300 -skew-y-3">124</p>
            <p class="text-sm sm:text-base uppercase">Profile Views</p>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="px-4 py-2 bg-purple-900 text-purple-100 dark:bg-purple-600 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-700 dark:hover:bg-purple-500 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Boost Profile</button>
          <button class="px-4 py-2 bg-purple-500 text-purple-900 dark:bg-purple-400 dark:text-purple-900 font-bold uppercase border-2 border-purple-900 dark:border-purple-600 hover:bg-purple-400 dark:hover:bg-purple-300 transition-colors duration-200 shadow-[4px_4px_0px_0px_#4c1d95] dark:shadow-[4px_4px_0px_0px_#a855f7]">Go Incognito</button>
        </div>
      </div>

    </section>
  </main>

  <!-- Brutalist Footer -->
  <footer class="mt-8 py-4 text-center border-t-4 border-purple-900 dark:border-purple-600 text-sm sm:text-base uppercase font-bold">
    <p>&copy; 2023 CrushLink Inc. All Rights Reserved. <span class="font-normal italic">No love lost.</span></p>
  </footer>

</div>

Dashboard_Agriculture_ForestGreen_Luxury

Un composant de tableau de bord complexe sur le thème du luxe conçu pour l’agriculture et les sites Web agricoles, doté d’une élégante palette de couleurs forêt/vert et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="flex flex-col lg:flex-row">
    <!-- Sidebar -->
    <aside class="w-full lg:w-64 bg-white dark:bg-gray-800 shadow-lg p-4 lg:p-6 flex flex-col items-center lg:items-start border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-6">
        <svg class="h-10 w-10 text-emerald-600 dark:text-emerald-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 10H14.75L14.25 17H9.75Z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10L6.5 7H17.5L17 10M12 21V10" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.5 15C5.5 15.5 5 16 4.5 16C4 16 3.5 15.5 3.5 15C3.5 14.5 4 14 4.5 14C5 14 5.5 14.5 5.5 15Z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 15C18.5 15.5 19 16 19.5 16C20 16 20.5 15.5 20.5 15C20.5 14.5 20 14 19.5 14C19 14 18.5 14.5 18.5 15Z" />
        </svg>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 hidden lg:block">FarmFlow</h1>
      </div>
      <nav class="w-full">
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/40 font-medium transition duration-200 hover:bg-emerald-100 dark:hover:bg-emerald-900 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-1.5-1.5L21 12m-9 9v-7.5" />
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M2 7l2 1m-2-1l2-1m-2 1v2.5M10 21h4c.54 0 1.05-.18 1.45-.5L19.5 17c.6-.45 1.5-.02 1.5.76V21c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1v-3.24c0-.78.9-1.21 1.5-.76L8.55 20.5c.4.32.91.5 1.45.5zm4.07-16.74C14.07 3.5 13.9 3 13.5 3c-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26c.4-.76.23-1.26-.17-1.26-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26z" />
          </svg>
          Crops
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
          </svg>
          Livestock
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L13 21 21 13M9 3v13a4 4 0 004 4h4a2 2 0 002-2V9.586a1 1 0 00-.293-.707l-2.586-2.586A1 1 0 0015.414 6H13a2 2 0 00-2 2z" />
          </svg>
          Inventory
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4v2m0 0h.01M17 17H7a2 2 0 01-2-2v-3a2 2 0 012-2h10a2 2 0 012 2v3a2 2 0 01-2 2zm0 0h.01" />
          </svg>
          Finance
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          Settings
        </a>
      </nav>

      <div class="mt-auto w-full pt-4 border-t border-gray-200 dark:border-gray-700 text-center lg:text-left">
        <div class="flex items-center justify-center lg:justify-start">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-3 hidden lg:block">
            <p class="text-sm font-semibold">John Davis</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Farm Manager</p>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 p-4 lg:p-8 overflow-y-auto">
      <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-0">Agricultural Overview</h2>
        <div class="flex items-center space-x-4">
          <button class="px-4 py-2 bg-emerald-600 dark:bg-emerald-700 text-white rounded-lg shadow-md hover:bg-emerald-700 dark:hover:bg-emerald-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
            <svg class="h-5 w-5 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Add New
          </button>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </button>
        </div>
      </header>

      <!-- Analytics Cards -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Total Yield (tons)</p>
            <svg class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3,105</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-green-600 dark:text-green-400 font-semibold">+4.2%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. last month</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Active Fields</p>
            <svg class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657A8 8 0 1117.657 16.657z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">18</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-red-600 dark:text-red-400 font-semibold">-1.5%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">since new season</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Healthy Livestock</p>
            <svg class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c.045 4.383 3.633 7.792 8.52 8.167S22.03 16.03 21.072 12A12.001 12.001 0 0019.618 7.984z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">452</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-green-600 dark:text-green-400 font-semibold">+0.8%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">health rate</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Resources Used</p>
            <svg class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7l4-6 4 6v4m0 8a2 2 0 11-4 0 2 2 0 014 0zm-4-8c0 .828.672 1.5 1.5 1.5S15 11.828 15 11V6a1 1 0 00-1-1h-4a1 1 0 00-1 1v5c0 .828.672 1.5 1.5 1.5zm1.5-1.5z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">$8,750</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-red-600 dark:text-red-400 font-semibold">+7.1%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. average</span>
          </div>
        </div>
      </div>

      <!-- Main Charts and Tables -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Crop Health Chart -->
        <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Crop Health & Growth</h3>
          <div class="relative h-64 w-full flex items-center justify-center">
            <img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart for crop health" class="w-full h-full object-cover rounded-md opacity-70" />
            <div class="absolute text-lg text-gray-500 dark:text-gray-400">[Placeholder Chart Area]</div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Visual representation of crop health indicators and growth trends over time.</p>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activities</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-center">
              <span class="text-emerald-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Harvested Wheat Field A</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago - 1.5 tons</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-blue-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Watering System Check</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday - Field B</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-yellow-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Purchased new fertilizer batch</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">2 days ago - $500</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-purple-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Vaccinated 10 cattle</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago - Barn 2</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Upcoming Tasks & Weather -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Upcoming Tasks -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Upcoming Tasks</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Soil Analysis - Field C</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 24th Oct, 2023</p>
              </div>
            </li>
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Plant Soybeans - Field D</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 26th Oct, 2023</p>
              </div>
            </li>
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Fertilize Orchard</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 30th Oct, 2023</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- Weather Forecast -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Weather Forecast</h3>
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
              <svg class="h-12 w-12 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m-8-4v10l8 4 8-4V7m-8 4V4" />
              </svg>
              <div>
                <p class="text-4xl font-bold">18°C</p>
                <p class="text-gray-600 dark:text-gray-400">Partly Cloudy</p>
              </div>
            </div>
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Today</p>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center text-gray-600 dark:text-gray-400">
            <div>
              <p class="text-sm">Tomorrow</p>
              <svg class="h-8 w-8 text-blue-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15C3 15.5 3 16 3.5 16.5C4 17 4.5 17 5 17H19C19.5 17 20 16.5 20 16V10M17 14L12 9 7 14M12 9V3" />
              </svg>
              <p class="text-sm">16°C</p>
            </div>
            <div>
              <p class="text-sm">Fri</p>
              <svg class="h-8 w-8 text-gray-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11.5c0 1.93-1.57 3.5-3.5 3.5S10 13.43 10 11.5V10M15 10c0 1.1-.9 2-2 2s-2-.9-2-2m-1 7l4 4 4-4m-4 4V13" />
              </svg>
              <p class="text-sm">15°C</p>
            </div>
            <div>
              <p class="text-sm">Sat</p>
              <svg class="h-8 w-8 text-green-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18M18 13.06L12 18 6 13.06M6 10L12 5 18 10" />
              </svg>
              <p class="text-sm">20°C</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

Dashboard_Event_Conference

Un tableau de bord complexe, sur le thème du monospace/développeur, pour la gestion d’événements et de conférences, avec une palette de couleurs bonbon/sucré et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-['JetBrains_Mono',_monospace] min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 sm:p-8">

  <!-- Not strictly monospace, but 'JetBrains Mono' is a good developer font -->
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

  <style>
    /* Custom scrollbar for webkit browsers */
    .scrollbar-webkit::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .scrollbar-webkit::-webkit-scrollbar-track {
      background: transparent;
    }

    .scrollbar-webkit::-webkit-scrollbar-thumb {
      background: #fbcfe8; /* pink-200 */
      border-radius: 4px;
    }

    .dark .scrollbar-webkit::-webkit-scrollbar-thumb {
      background: #a78bfa; /* violet-400 */
    }

    .scrollbar-webkit::-webkit-scrollbar-thumb:hover {
      background: #f472b6; /* pink-400 */
    }

    .dark .scrollbar-webkit::-webkit-scrollbar-thumb:hover {
      background: #8b5cf6; /* violet-500 */
    }
  </style>

  <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8">
    <h1 class="text-4xl font-bold mb-4 sm:mb-0 text-fuchsia-600 dark:text-fuchsia-400"><span class="text-pink-500 block sm:inline">[</span> Event OS <span class="text-pink-500 block sm:inline">]</span></h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search commands..." class="py-2 pl-4 pr-10 text-sm rounded-md bg-pink-200 dark:bg-purple-800 border border-fuchsia-300 dark:border-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent transition-all duration-200 placeholder:text-pink-800 dark:placeholder:text-purple-300 text-pink-900 dark:text-purple-100">
        <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-fuchsia-700 dark:text-purple-300" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
      <button aria-label="User profile" class="p-1 rounded-full bg-pink-300 dark:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400">
        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-purple-400">
      </button>
    </div>
  </header>

  <main class="grid grid-cols-1 lg:grid-cols-3 gap-6 auto-rows-min">

    <!-- Main Stats Terminal -->
    <section class="lg:col-span-2 p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 overflow-hidden relative">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ CONFERENCE_STATS.exe</h2>
      <div class="absolute top-3 right-4 flex space-x-2">
        <div class="w-3 h-3 rounded-full bg-red-400"></div>
        <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
        <div class="w-3 h-3 rounded-full bg-green-400"></div>
      </div>
      <pre class="whitespace-pre-wrap text-sm leading-relaxed text-gray-700 dark:text-gray-300 scrollbar-webkit max-h-96 overflow-auto">
        <span class="text-fuchsia-500">$</span> <span class="text-green-500">event fetch --id=DEV_CONF_2024</span>
        <span class="text-gray-500"># Fetching data for Developer Conference 2024...</span>

        <span class="text-pink-400">Status:</span> <span class="text-cyan-400">ACTIVE</span>
        <span class="text-pink-400">Total Attendees:</span> <span class="text-orange-400">1,567</span> <span class="text-gray-500">(+12% vs. Last Year)</span>
        <span class="text-pink-400">Registered Speakers:</span> <span class="text-orange-400">89</span>
        <span class="text-pink-400">Sessions Scheduled:</span> <span class="text-orange-400">125</span>
        <span class="text-pink-400">Available Tickets:</span> <span class="text-orange-400">233</span>

        <span class="text-fuchsia-500">$</span> <span class="text-green-500">metrics show --type=engagement --period=24h</span>
        <span class="text-pink-400">Live Streams:</span>
          <span class="ml-4">Keynote_Main:</span> <span class="text-yellow-400">789 live viewers</span>
          <span class="ml-4">Track_Frontend:</span> <span class="text-yellow-400">321 live viewers</span>
          <span class="ml-4">Track_Backend:</span> <span class="text-yellow-400">288 live viewers</span>
        <span class="text-pink-400">Social Mentions (Last 1hr):</span> <span class="text-yellow-400">+56</span>
        <span class="text-pink-400">App Downloads:</span> <span class="text-yellow-400">1,120</span>

        <span class="text-fuchsia-500">$</span> <span class="text-green-500">alerts status</span>
        <span class="text-green-500">[ OK ]</span> No critical alerts detected.
        <span class="text-orange-500">[ WARN ]</span> Venue capacity 85% for 'AI Revolution' Q&A. Monitor closely.

        <span class="text-fuchsia-500">$</span> <span class="text-green-500">help</span>
        <span class="text-gray-500">Type 'dashboard --full' for extended data.</span>
        <span class="text-gray-500">Type 'commands' for a list of available actions.</span>
      </pre>
    </section>

    <!-- Quick Actions / Command Prompt -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 flex flex-col">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ QUICK_ACTIONS.sh</h2>
      <div class="flex-grow space-y-3 mb-6 scrollbar-webkit overflow-y-auto max-h-64 sm:max-h-full">
        <button class="w-full text-left py-3 px-4 rounded-md bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 hover:bg-purple-300 dark:hover:bg-purple-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-400">
          <span class="text-purple-600 dark:text-purple-300">></span> deploy_update --schedule=A
        </button>
        <button class="w-full text-left py-3 px-4 rounded-md bg-pink-200 dark:bg-fuchsia-700 text-pink-800 dark:text-fuchsia-200 hover:bg-pink-300 dark:hover:bg-fuchsia-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-fuchsia-400">
          <span class="text-pink-600 dark:text-fuchsia-300">></span> send_broadcast_msg "Lunch Break!"
        </button>
        <button class="w-full text-left py-3 px-4 rounded-md bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 hover:bg-teal-300 dark:hover:bg-teal-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-teal-400 dark:focus:ring-teal-400">
          <span class="text-teal-600 dark:text-teal-300">></span> manage_speakers --add
        </button>
        <button class="w-full text-left py-3 px-4 rounded-md bg-orange-200 dark:bg-orange-700 text-orange-800 dark:text-orange-200 hover:bg-orange-300 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-400">
          <span class="text-orange-600 dark:text-orange-300">></span> ticket_sales --report --today
        </button>
      </div>
      <div class="relative">
        <input type="text" placeholder="Enter command..." class="w-full py-2 pl-4 pr-10 text-sm rounded-md bg-pink-200 dark:bg-purple-800 border border-fuchsia-300 dark:border-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 focus:border-transparent transition-all duration-200 placeholder:text-pink-800 dark:placeholder:text-purple-300 text-pink-900 dark:text-purple-100">
        <button aria-label="Execute command" class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md bg-fuchsia-400 dark:bg-violet-600 hover:bg-fuchsia-500 dark:hover:bg-violet-700 text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">
          <svg class="w-4 h-4" 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 5l7 7-7 7"></path></svg>
        </button>
      </div>
    </section>

    <!-- Upcoming Sessions Panel -->
    <section class="lg:col-span-2 p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ UPCOMING_SESSIONS.log</h2>
      <div class="space-y-4 scrollbar-webkit overflow-y-auto max-h-96">
        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/tech/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[10:00 AM - 11:00 AM] | ROOM: HEXAGON</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Future of Quantum Computing (Keynote)</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Dr. Alice Wonderland</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/ai/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[11:15 AM - 12:15 PM] | ROOM: NEBULA</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Deep Learning in the Cloud</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">Mr. Bob Builder & Ms. Carol Developer</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/cyber/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[01:30 PM - 02:30 PM] | ROOM: PIXEL</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Cybersecurity Best Practices 2024</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">S. Hacker</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row items-center bg-pink-100 dark:bg-gray-800 p-4 rounded-md border border-fuchsia-300 dark:border-violet-800 transition-transform duration-200 hover:scale-[1.01]">
          <div class="flex-shrink-0 mb-3 sm:mb-0 sm:mr-4">
            <img src="https://picsum.photos/seed/webdev/100/70" alt="Session Thumbnail" class="w-24 h-16 object-cover rounded-md border border-fuchsia-400 dark:border-violet-500">
          </div>
          <div class="flex-grow text-center sm:text-left">
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">[02:45 PM - 03:45 PM] | ROOM: MATRIX</p>
            <h3 class="text-lg font-semibold text-fuchsia-600 dark:text-pink-300">Building Responsive UIs with No-Code</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300">D. Coder</p>
          </div>
          <div class="flex-shrink-0 mt-3 sm:mt-0 sm:ml-4">
            <button class="py-2 px-4 text-sm rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400">+ Add to Calendar</button>
          </div>
        </div>

      </div>
    </section>

    <!-- Recent Activities Log -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900 row-span-2">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ ACTIVITY_LOG.sys</h2>
      <div class="space-y-4 scrollbar-webkit overflow-y-auto max-h-96 lg:max-h-full">
        <div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
          <p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:30:22</span> User <span class="font-medium">@AdminUser</span> approved 5 new speaker applications.</p>
        </div>
        <div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
          <p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[ALERT]</span> <span class="text-gray-600 dark:text-gray-400">09:28:15</span> High server load detected on <code>streaming_server_03</code>.</p>
        </div>
        <div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
          <p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[WARN]</span> <span class="text-gray-600 dark:text-gray-400">09:25:01</span> Payment gateway API reported intermittent disconnects.</p>
        </div>
        <div class="p-3 bg-purple-100 dark:bg-gray-800 rounded-md border border-purple-300 dark:border-purple-700">
          <p class="text-sm text-purple-800 dark:text-purple-300"><span class="text-purple-600 dark:text-purple-400">[ACTION]</span> <span class="text-gray-600 dark:text-gray-400">09:20:45</span> System initiated <code>backup_db_prod.sh</code>.</p>
        </div>
        <div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
          <p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:18:00</span> New attendee registered: Jane Doe.</p>
        </div>
         <div class="p-3 bg-teal-100 dark:bg-gray-800 rounded-md border border-teal-300 dark:border-teal-700">
          <p class="text-sm text-teal-800 dark:text-teal-300"><span class="text-teal-600 dark:text-teal-400">[INFO]</span> <span class="text-gray-600 dark:text-gray-400">09:15:30</span> Session 'Web Security' updated by <span class="font-medium">@SpeakerAdmin</span>.</p>
        </div>
        <div class="p-3 bg-purple-100 dark:bg-gray-800 rounded-md border border-purple-300 dark:border-purple-700">
          <p class="text-sm text-purple-800 dark:text-purple-300"><span class="text-purple-600 dark:text-purple-400">[ACTION]</span> <span class="text-gray-600 dark:text-gray-400">09:10:05</span> Newsletter 'Day 1 Schedule' sent to 15,000 subscribers.</p>
        </div>
        <div class="p-3 bg-pink-100 dark:bg-gray-800 rounded-md border border-pink-300 dark:border-pink-700">
          <p class="text-sm text-pink-800 dark:text-pink-300"><span class="text-pink-600 dark:text-pink-400">[ERROR]</span> <span class="text-gray-600 dark:text-gray-400">09:05:40</span> Failed to sync data with analytics platform. Retrying...</p>
        </div>
      </div>
    </section>

    <!-- Resource Usage / Graphs -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ RESOURCE_MONITOR.graph</h2>
      <div class="space-y-6">
        <div>
          <p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">CPU Usage:</span> <span class="text-orange-400">78%</span> <span class="bg-pink-300 dark:bg-violet-700 px-2 py-0.5 rounded text-xs text-pink-800 dark:text-violet-200">HIGH</span></p>
          <div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
            <div class="bg-fuchsia-500 h-3 rounded-full" style="width: 78%;"></div>
          </div>
        </div>
        <div>
          <p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">Memory Usage:</span> <span class="text-green-500">45%</span></p>
          <div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
            <div class="bg-teal-500 h-3 rounded-full" style="width: 45%;"></div>
          </div>
        </div>
        <div>
          <p class="text-gray-700 dark:text-gray-300 mb-2"><span class="text-fuchsia-500">Network I/O:</span> <span class="text-yellow-500">62%</span></p>
          <div class="w-full bg-pink-200 dark:bg-gray-700 rounded-full h-3">
            <div class="bg-orange-500 h-3 rounded-full" style="width: 62%;"></div>
          </div>
        </div>
        <div class="text-center">
          <button class="py-2 px-5 rounded-md bg-fuchsia-400 dark:bg-violet-600 text-white hover:bg-fuchsia-500 dark:hover:bg-violet-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-violet-400 text-sm">
            VIEW FULL STATS
          </button>
        </div>
      </div>
    </section>

    <!-- Team Collaboration Status -->
    <section class="p-6 rounded-lg shadow-lg bg-pink-50 dark:bg-gray-850 border border-fuchsia-200 dark:border-violet-900">
      <h2 class="text-2xl font-bold mb-4 text-pink-600 dark:text-pink-400">$ TEAM_STATUS.json</h2>
      <div class="space-y-4">
        <div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
          <div class="flex-grow">
            <p class="font-medium text-pink-800 dark:text-pink-300">John Doe <span class="text-xs text-gray-500 dark:text-gray-400">@jdoe</span></p>
            <p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400">Online</span> | Task: <code>Monitor Live Streams</code></p>
          </div>
        </div>
        <div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
          <div class="flex-grow">
            <p class="font-medium text-pink-800 dark:text-pink-300">Jane Smith <span class="text-xs text-gray-500 dark:text-gray-400">@jsmith</span></p>
            <p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-yellow-600 dark:text-yellow-400">Busy</span> | Task: <code>Attendee Support Queries</code></p>
          </div>
        </div>
        <div class="flex items-center bg-pink-100 dark:bg-gray-800 p-3 rounded-md border border-fuchsia-300 dark:border-violet-800">
          <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Team Member Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-400 dark:border-violet-500 mr-3">
          <div class="flex-grow">
            <p class="font-medium text-pink-800 dark:text-pink-300">Alex Lee <span class="text-xs text-gray-500 dark:text-gray-400">@alee</span></p>
            <p class="text-sm text-gray-700 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400">Online</span> | Task: <code>Venue A/V Check</code></p>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
    <p>&copy; 2024 Event OS <span class="text-fuchsia-400 dark:text-violet-400">//</span> All Rights Reserved.</p>
    <p>Version: <span class="text-pink-400 dark:text-fuchsia-400">1.0.0-beta</span></p>
  </footer>

</div>

Tableau de bord de jeu

Un composant d’interface utilisateur de tableau de bord de jeu complexe et réactif conçu pour le mode sombre, avec une palette de couleurs en niveaux de gris. Comprend les statistiques des joueurs, l’activité récente et les listes de jeux.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-950 text-gray-100 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-950 dark:text-gray-100">

  <!-- Header -->
  <header class="flex flex-col sm:flex-row items-center justify-between mb-8 gap-4">
    <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-blue-400 tracking-tight">GAMER HUB</h1>
    <div class="relative w-full sm:w-auto">
      <input type="text" placeholder="Search games, players..." class="w-full sm:w-80 p-3 pl-10 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300">
      <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
    </div>
    <div class="flex items-center gap-4">
      <button aria-label="Notifications" class="relative p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition-colors duration-200">
        <svg class="w-6 h-6 text-gray-400" 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="absolute top-0 right-0 block h-3 w-3 rounded-full ring-2 ring-gray-950 bg-red-500"></span>
      </button>
      <img class="w-10 h-10 rounded-full border-2 border-blue-500 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar">
    </div>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Player Stats Card -->
    <section class="col-span-1 md:col-span-2 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
      <h2 class="text-2xl font-bold mb-4 text-blue-400">Player Stats</h2>
      <div class="flex flex-col items-center mb-6">
        <img class="w-24 h-24 rounded-full border-4 border-blue-400 mb-3 object-cover" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Player Avatar">
        <div class="text-center">
          <p class="text-xl font-semibold">BladeMasterX</p>
          <p class="text-gray-400 text-sm">Level 78 • Rank: Gold I</p>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-4 text-center">
        <div>
          <p class="text-gray-300 text-sm">K/D Ratio</p>
          <p class="text-xl font-bold text-gray-50">2.45</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Wins</p>
          <p class="text-xl font-bold text-gray-50">1,234</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Matches Played</p>
          <p class="text-xl font-bold text-gray-50">3,109</p>
        </div>
        <div>
          <p class="text-gray-300 text-sm">Hours Played</p>
          <p class="text-xl font-bold text-gray-50">876</p>
        </div>
      </div>
      <button class="mt-6 w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">View Profile</button>
    </section>

    <!-- Recent Activity Card -->
    <section class="col-span-1 md:col-span-3 lg:col-span-2 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
      <h2 class="text-2xl font-bold mb-5 text-accent-blue">Recent Activity</h2>
      <div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=1" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Defeated boss in <span class="text-blue-300">Cyberpunk Ascent</span></p>
            <p class="text-gray-400 text-sm">5 minutes ago</p>
          </div>
          <span class="text-green-400 font-bold text-sm">+120 XP</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Friend Avatar">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">GamerGirl_88</span> is online!</p>
            <p class="text-gray-400 text-sm">15 minutes ago</p>
          </div>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=2" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Achieved 'Grand Master' in <span class="text-blue-300">Starfall Arena</span></p>
            <p class="text-gray-400 text-sm">1 hour ago</p>
          </div>
          <span class="text-purple-400 font-bold text-sm">+1 Rank</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=3" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Bought new DLC for <span class="text-blue-300">Mythic Realms IV</span></p>
            <p class="text-gray-400 text-sm">3 hours ago</p>
          </div>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://picsum.photos/60/60?random=4" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Completed Daily Quest in <span class="text-blue-300">Dragon's Lair Saga</span></p>
            <p class="text-gray-400 text-sm">Yesterday</p>
          </div>
          <span class="text-green-400 font-bold text-sm">+50 XP</span>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg">
          <img class="w-12 h-12 rounded-lg object-cover" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Friend Avatar">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Friend <span class="text-blue-300">NeonKiller</span> is streaming <span class="text-blue-300">Pixel Warfare</span></p>
            <p class="text-gray-400 text-sm">Yesterday</p>
          </div>
        </div>
      </div>
    </section>

    <!-- My Games List -->
    <section class="col-span-1 md:col-span-3 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800 overflow-hidden">
      <div class="flex justify-between items-center mb-5">
        <h2 class="text-2xl font-bold text-blue-400">My Games</h2>
        <button aria-label="Add Game" class="text-blue-400 hover:text-blue-300 transition-colors duration-200">
          <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
      <div class="space-y-4 max-h-[400px] overflow-y-auto custom-scrollbar pr-2">
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=5" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Galactic Odyssey</p>
            <p class="text-gray-400 text-sm">Online - 12 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=6" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Shadowblade Chronicles</p>
            <p class="text-gray-400 text-sm">Offline</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=7" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Pixel Royale</p>
            <p class="text-gray-400 text-sm">Online - 89 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=8" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Mystic Dungeon Crawler</p>
            <p class="text-gray-400 text-sm">Offline</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
        <div class="flex items-center gap-4 p-3 bg-gray-700 rounded-lg group hover:scale-[1.02] transition-transform duration-200 cursor-pointer">
          <img class="w-16 h-16 rounded-lg object-cover" src="https://picsum.photos/100/100?random=9" alt="Game Cover">
          <div class="flex-1">
            <p class="text-gray-50 font-semibold">Cosmic Commanders</p>
            <p class="text-gray-400 text-sm">Online - 21 players</p>
          </div>
          <button aria-label="Play Game" class="text-blue-400 hover:text-blue-300 p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg></button>
        </div>
      </div>
    </section>

    <!-- Quick Stats Card -->
    <section class="col-span-1 md:col-span-1 lg:col-span-1 bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-700 dark:border-gray-700 dark:bg-gray-800">
      <h2 class="text-2xl font-bold mb-5 text-accent-blue">Quick Stats</h2>
      <div class="space-y-4">
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Online Friends</p>
          <span class="text-blue-400 font-bold text-xl">14</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">New Achievements</p>
          <span class="text-green-400 font-bold text-xl">3</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Upcoming Events</p>
          <span class="text-yellow-400 font-bold text-xl">2</span>
        </div>
        <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
          <p class="text-gray-300">Messages</p>
          <span class="text-red-400 font-bold text-xl">5</span>
        </div>
      </div>
    </section>

  </main>

  <style>
    /* Custom scrollbar for better aesthetics */
    .custom-scrollbar::-webkit-scrollbar {
      width: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: #374151; /* gray-700 */
      border-radius: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background-color: #60A5FA; /* blue-400 */
      border-radius: 10px;
      border: 2px solid #1F2937; /* gray-800 */
    }

    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
      border: 2px solid #1F2937; /* gray-800 */
    }

    /* For Firefox */
    .custom-scrollbar {
      scrollbar-width: thin;
      scrollbar-color: #60A5FA #374151; /* thumb and track */
    }
  </style>
</div>

Dashboard_Component

Un composant de tableau de bord financier/bancaire réactif avec un style de conception aquarelle/artistique et une palette de couleurs chaudes au coucher du soleil. Inclut la prise en charge du mode sombre et un niveau de complexité modéré.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 min-h-screen">

  <!-- Background elements for artistic feel -->
  <div class="absolute inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-0 left-0 w-64 h-64 bg-red-200 dark:bg-red-900 opacity-30 dark:opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
    <div class="absolute bottom-1/4 right-1/4 w-72 h-72 bg-orange-200 dark:bg-orange-800 opacity-30 dark:opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-10 left-1/3 w-80 h-80 bg-yellow-200 dark:bg-yellow-700 opacity-30 dark:opacity-20 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
  </div>

  <div class="relative max-w-7xl mx-auto z-10">
    <!-- Header -->
    <header class="flex flex-col sm:flex-row items-center justify-between py-4 mb-8 bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl shadow-lg dark:shadow-xl">
      <div class="flex items-center space-x-4 mb-4 sm:mb-0 ml-0 sm:ml-6">
        <img src="https://picsum.photos/id/1025/60/60" alt="Bank Logo" class="rounded-full border-2 border-orange-400 dark:border-orange-600 shadow-md">
        <h1 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-400 drop-shadow-sm">My Digital Bank</h1>
      </div>
      <div class="flex items-center space-x-4 mr-0 sm:mr-6">
        <button class="p-2 rounded-full hover:bg-orange-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <svg class="w-6 h-6 text-orange-600 dark:text-orange-300" 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="M15 17h2a2 2 0 002-2v-2a2 2 0 00-2-2H7a2 2 0 00-2 2v2a2 2 0 002 2h2m0 0V9a2 2 0 012-2h4a2 2 0 012 2v8m-6 0v2m0-4h.01M9 13.01l.01-.01M15 13.01l.01-.01"></path></svg>
        </button>
        <button class="p-2 rounded-full hover:bg-orange-100 dark:hover:bg-gray-700 transition-colors duration-200">
          <svg class="w-6 h-6 text-orange-600 dark:text-orange-300" 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 8h10M7 12h10M7 16h10M4 20h16a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-orange-400 dark:border-orange-600 shadow-md">
      </div>
    </header>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

      <!-- Left Column: Balance & Transactions -->
      <div class="md:col-span-2 space-y-6">
        
        <!-- Current Balance Card -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
          <h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Current Balance</h2>
          <div class="flex items-center justify-between mb-6">
            <div>
              <p class="text-4xl font-bold text-red-700 dark:text-red-400 drop-shadow-sm">$12,450<sup class="text-xl font-normal text-red-500 dark:text-red-400">.89</sup></p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Available Funds</p>
            </div>
            <button class="px-6 py-3 bg-gradient-to-br from-orange-500 to-red-600 text-white rounded-full shadow-lg hover:from-orange-600 hover:to-red-700 transition-all duration-300 transform hover:-translate-y-0.5">
              Deposit Funds
            </button>
          </div>
          <div class="grid grid-cols-2 gap-4 text-sm text-gray-700 dark:text-gray-300">
            <div>
              <p class="font-medium">Savings Account:</p>
              <p class="text-green-600 dark:text-green-400 font-bold">$8,200.00</p>
            </div>
            <div>
              <p class="font-medium">Checking Account:</p>
              <p class="text-green-600 dark:text-green-400 font-bold">$4,250.89</p>
            </div>
          </div>
        </div>

        <!-- Recent Transactions -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700">
          <h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Recent Transactions</h2>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-orange-200 dark:divide-gray-700">
              <thead class="bg-orange-50/50 dark:bg-gray-700/50">
                <tr>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider rounded-tl-md">Description</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
                  <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
                  <th scope="col" class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider rounded-tr-md">Amount</th>
                </tr>
              </thead>
              <tbody class="bg-white/50 dark:bg-gray-800/50 divide-y divide-orange-100 dark:divide-gray-700">
                <tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Online Food Delivery</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 26, 2023</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Food</span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400">-$25.50</td>
                </tr>
                <tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Salary Deposit</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 25, 2023</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Income</span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-right text-sm text-green-600 dark:text-green-400">+$3,500.00</td>
                </tr>
                <tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Monthly Subscription</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 24, 2023</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-800 dark:text-purple-100">Subscription</span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400">-$12.99</td>
                </tr>
                <tr class="hover:bg-orange-50 dark:hover:bg-gray-700 transition-colors duration-150">
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-200">Coffee Shop</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Oct 24, 2023</td>
                  <td class="px-4 py-3 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Dining</span>
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-right text-sm text-red-600 dark:text-red-400">-$5.75</td>
                </tr>
              </tbody>
            </table>
          </div>
          <button class="mt-4 w-full text-center py-2 text-sm font-medium text-orange-600 dark:text-orange-300 hover:text-orange-800 dark:hover:text-orange-100 transition-colors duration-200">
            View All Transactions
          </button>
        </div>
      </div>

      <!-- Right Column: Quick Actions & News -->
      <div class="space-y-6">
        <!-- Quick Actions -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700">
          <h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Quick Actions</h2>
          <div class="grid grid-cols-2 gap-4">
            <button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
              <svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002 12c0 2.755 4.29 5.233 10 5.233S22 14.755 22 12A12.001 12.001 0 0018.618 7.984z"></path></svg>
              <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Pay Bills</span>
            </button>
            <button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
              <svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
              <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Transfer</span>
            </button>
            <button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
              <svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-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="M3 10h18M7 15h10m-9 4h8a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
              <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Cards</span>
            </button>
            <button class="flex flex-col items-center p-4 rounded-xl bg-orange-50 dark:bg-gray-700 hover:bg-orange-100 dark:hover:bg-gray-600 transition-colors duration-200 shadow-sm">
              <svg class="w-8 h-8 text-orange-600 dark:text-orange-300 mb-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-8c1.11 0 2.08.402 2.593 1L21 12h-3.819c-.58-3.056-4.9-5-10.181-5H3c.695 0 1.37.199 2 .591V12h3.819c.58 3.056 4.9 5 10.181 5H21a9.998 9.998 0 00-4-2c-1.11 0-2.08-.402-2.593-1L3 12h3.819"></path></svg>
              <span class="text-sm font-medium text-gray-800 dark:text-gray-200">Invest</span>
            </button>
          </div>
        </div>

        <!-- Financial Insights / News -->
        <div class="bg-white/70 dark:bg-gray-800/70 backdrop-blur-md rounded-xl p-6 shadow-lg dark:shadow-xl border border-orange-200 dark:border-gray-700">
          <h2 class="text-xl font-semibold text-red-600 dark:text-red-300 mb-4">Financial Insights</h2>
          <div class="space-y-4">
            <div class="flex space-x-4 bg-orange-50 dark:bg-gray-700 p-3 rounded-lg shadow-sm">
              <img src="https://picsum.photos/id/403/80/60" alt="News thumbnail" class="w-20 h-15 rounded-md object-cover border border-orange-100 dark:border-gray-600">
              <div>
                <h3 class="text-sm font-medium text-gray-900 dark:text-gray-200 leading-tight mb-0.5">Tips for Saving on Daily Expenses</h3>
                <p class="text-xs text-gray-600 dark:text-gray-400">Learn how small changes can lead to big savings by year-end.</p>
              </div>
            </div>
            <div class="flex space-x-4 bg-orange-50 dark:bg-gray-700 p-3 rounded-lg shadow-sm">
              <img src="https://picsum.photos/id/405/80/60" alt="News thumbnail" class="w-20 h-15 rounded-md object-cover border border-orange-100 dark:border-gray-600">
              <div>
                <h3 class="text-sm font-medium text-gray-900 dark:text-gray-200 leading-tight mb-0.5">Understanding Your Credit Score</h3>
                <p class="text-xs text-gray-600 dark:text-gray-400">A comprehensive guide to improving and maintaining a good credit score.</p>
              </div>
            </div>
            <div class="flex space-x-4 bg-orange-50 dark:bg-gray-700 p-3 rounded-lg shadow-sm">
              <img src="https://picsum.photos/id/400/80/60" alt="News thumbnail" class="w-20 h-15 rounded-md object-cover border border-orange-100 dark:border-gray-600">
              <div>
                <h3 class="text-sm font-medium text-gray-900 dark:text-gray-200 leading-tight mb-0.5">Market Trends for Q4 2023</h3>
                <p class="text-xs text-gray-600 dark:text-gray-400">An overview of the current investment landscape and future predictions.</p>
              </div>
            </div>
          </div>
          <button class="mt-4 w-full text-center py-2 text-sm font-medium text-orange-600 dark:text-orange-300 hover:text-orange-800 dark:hover:text-orange-100 transition-colors duration-200">
            Browse All Insights
          </button>
        </div>
      </div>
    </div>

    <!-- Footer (optional, simple for now) -->
    <footer class="text-center mt-10 text-gray-600 dark:text-gray-400 text-sm">
      <p>&copy; 2023 My Digital Bank. All rights reserved.</p>
      <p class="mt-1"><a href="#" class="hover:underline text-orange-600 dark:text-orange-400">Privacy Policy</a> | <a href="#" class="hover:underline text-orange-600 dark:text-orange-400">Terms of Service</a></p>
    </footer>
  </div>
</div>

<style>
  /* Base for blobs, adjust as needed */
  @keyframes animateBlob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30vw, -20vh) scale(1.1); }
    66% { transform: translate(-20vw, 15vh) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
  }

  .animate-blob {
    animation: animateBlob 7s infinite alternate;
  }

  /* Delay different blobs to create a more dynamic flow */
  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Composant du tableau de bord de l’agriculture de luxe

Un composant de tableau de bord élégant et sophistiqué pour l’agriculture et les sites Web agricoles, avec une palette de couleurs noir et blanc avec un accent émeraude vibrant. Il comprend des indicateurs clés, des activités récentes et des éléments interactifs, conçus pour être entièrement réactifs et prendre en charge le mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
    <!-- Header/Title Section -->
    <div class="md:col-span-3 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
      <h1 class="text-3xl font-serif text-gray-900 mb-2 dark:text-gray-100">Farm Overview Dashboard</h1>
      <p class="text-gray-600 dark:text-gray-400">Monitor key agricultural metrics and activities.</p>
      <div class="mt-4 flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Farm Manager Avatar" class="w-10 h-10 rounded-full border-2 border-emerald-500">
        <div>
          <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Farm Manager</p>
        </div>
      </div>
    </div>

    <!-- Key Metrics Section -->
    <div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Metric Card 1 -->
      <div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
        <div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Acres Cultivated</h3>
          <p class="text-4xl font-bold text-emerald-600">475 <span class="text-lg text-gray-500 dark:text-gray-400">acres</span></p>
        </div>
        <p class="text-sm text-gray-500 mt-4 dark:text-gray-400">+5% from last month</p>
      </div>
      <!-- Metric Card 2 -->
      <div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
        <div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Crop Yield (Avg)</h3>
          <p class="text-4xl font-bold text-emerald-600">2.4 <span class="text-lg text-gray-500 dark:text-gray-400">tons/acre</span></p>
        </div>
        <p class="text-sm text-gray-500 mt-4 dark:text-gray-400">+0.2 last harvest period</p>
      </div>
      <!-- Metric Card 3 -->
      <div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
        <div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Livestock Health</h3>
          <p class="text-4xl font-bold text-emerald-600">98% <span class="text-lg text-gray-500 dark:text-gray-400">healthy</span></p>
        </div>
        <p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Excellent status</p>
      </div>
      <!-- Metric Card 4 -->
      <div class="bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
        <div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Water Usage</h3>
          <p class="text-4xl font-bold text-emerald-600">120K <span class="text-lg text-gray-500 dark:text-gray-400">liters</span></p>
        </div>
        <p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Target: 100K liters</p>
      </div>
       <!-- Metric Card 5 (Example of a larger card) -->
      <div class="sm:col-span-2 lg:col-span-1 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl flex flex-col justify-between transition-all duration-300">
        <div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2 dark:text-gray-100">Next Planting Cycle</h3>
          <p class="text-4xl font-bold text-emerald-600">14 <span class="text-lg text-gray-500 dark:text-gray-400">days</span></p>
        </div>
        <p class="text-sm text-gray-500 mt-4 dark:text-gray-400">Expected: Wheat & Barley</p>
      </div>
    </div>

    <!-- Recent Activities / Quick Links Section -->
    <div class="md:col-span-1 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
      <h3 class="text-xl font-semibold text-gray-900 mb-4 dark:text-gray-100">Recent Activities</h3>
      <ul class="space-y-4">
        <li class="flex items-start">
          <div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
          <div>
            <p class="text-gray-800 dark:text-gray-200">Fertilization completed in Field 3.</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </li>
        <li class="flex items-start">
          <div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
          <div>
            <p class="text-gray-800 dark:text-gray-200">New irrigation system configured.</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
          </div>
        </li>
         <li class="flex items-start">
          <div class="w-2 h-2 rounded-full bg-emerald-500 mt-2 mr-3 flex-shrink-0"></div>
          <div>
            <p class="text-gray-800 dark:text-gray-200">Harvest of Corn Plot A completed.</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
          </div>
        </li>
      </ul>

      <h3 class="text-xl font-semibold text-gray-900 mt-8 mb-4 dark:text-gray-100">Quick Links</h3>
      <div class="grid grid-cols-2 gap-3">
        <a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Field Map</a>
        <a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Reports</a>
        <a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Weather</a>
        <a href="#" class="bg-emerald-500 text-white py-2 px-4 rounded-md text-center text-sm hover:bg-emerald-600 transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 active:bg-emerald-700">Inventory</a>
      </div>
    </div>

    <!-- Farm Equipment Overview -->
    <div class="md:col-span-3 bg-white p-6 rounded-lg shadow-lg dark:bg-gray-800 dark:shadow-xl transition-all duration-300">
      <h3 class="text-xl font-semibold text-gray-900 mb-4 dark:text-gray-100">Farm Equipment Status</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <!-- Equipment Card 1 -->
        <div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
          <img src="https://picsum.photos/300/200?random=1" alt="Tractor" class="w-full h-32 object-cover rounded-md mb-3">
          <p class="font-medium text-gray-900 dark:text-gray-100">Tractor Alpha</p>
          <p class="text-sm text-emerald-600">Online</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Last service: 2 weeks ago</p>
        </div>
        <!-- Equipment Card 2 -->
        <div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
          <img src="https://picsum.photos/300/200?random=2" alt="Harvester" class="w-full h-32 object-cover rounded-md mb-3">
          <p class="font-medium text-gray-900 dark:text-gray-100">Harvester Beta</p>
          <p class="text-sm text-yellow-600">Idle</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Fuel: 75%</p>
        </div>
        <!-- Equipment Card 3 -->
        <div class="border border-gray-200 p-4 rounded-md dark:border-gray-700 dark:text-gray-400">
          <img src="https://picsum.photos/300/200?random=3" alt="Irrigation Pump" class="w-full h-32 object-cover rounded-md mb-3">
          <p class="font-medium text-gray-900 dark:text-gray-100">Irrigation Pump</p>
          <p class="text-sm text-red-600">Offline</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Maintenance required</p>
        </div>
        <!-- Equipment Card 4 -->
        <div class="border border-gray-200 p-4 rounded-md dark:border-gray-700">
          <img src="https://picsum.photos/300/200?random=4" alt="Drone" class="w-full h-32 object-cover rounded-md mb-3">
          <p class="font-medium text-gray-900 dark:text-gray-100">Farm Drone 1</p>
          <p class="text-sm text-emerald-600">Online</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Battery: 90%</p>
        </div>
      </div>
    </div>

  </div>
</div>