Search Components

Dashboards

Visual display of key performance indicators

Cryptocurrency Dashboard Component

A complex, responsive cryptocurrency dashboard component with a Swiss/International Typography design style, featuring multi-color gradient elements and dark mode support. It includes multiple sections like a portfolio overview, market trends, recent transactions, and a chart.

Open Preview

                <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

A simple, responsive neumorphic dashboard component with a forest/green color palette, designed for forum and community platforms, and includes dark mode support.

Open Preview

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

Luxury/Premium Marketplace Dashboard Component

A complex, responsive dashboard component for a multi-vendor marketplace with a luxury/premium design style. Features professional corporate blue color scheme, sophisticated typography, and dark mode support. Includes sections for overview, recent sales, top products, and quick statistics.

Open Preview

                <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

A complex, responsive weather and climate dashboard component inspired by Swiss/International Typography, using earth tones and supporting dark mode. Features multiple data points like current weather, forecast, air quality, and climate trends.

Open Preview

                <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

A brutalist-style dashboard component for dating and social platforms, featuring bold design, high contrast, and a purple/violet color scheme. Responsive with dark mode support.

Open Preview

                <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

A complex, luxury-themed dashboard component designed for agriculture and farming websites, featuring an elegant forest/green color palette and full responsiveness with dark mode support.

Open Preview

                <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

A complex, monospace/developer-themed dashboard for event and conference management, featuring candy/sweet color scheme and full responsiveness with dark mode support.

Open Preview

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

Gaming Dashboard

A complex, responsive gaming dashboard UI component designed for dark mode, featuring a grayscale color scheme. Includes player stats, recent activity, and game lists.

Open Preview

                <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

A responsive finance/banking dashboard component with a watercolor/artistic design style and warm sunset color scheme. Includes dark mode support and a moderate complexity level.

Open Preview

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

Luxury Agriculture Dashboard Component

An elegant and sophisticated dashboard component for agriculture and farming websites, featuring a black and white color scheme with a vibrant emerald accent. It includes key metrics, recent activities, and interactive elements, designed to be fully responsive and support dark mode.

Open Preview

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

Search Components

Categories

Dashboards