Composant de disposition de grille - Finance/Banque

<div class="min-h-screen bg-stone-100 dark:bg-zinc-900 p-4 sm:p-6 md:p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl sm:text-4xl font-bold text-stone-800 dark:text-stone-100 mb-6 text-center md:text-left">
      Dashboard Overview
    </h1>

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

      <!-- Card 1: Account Balance -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Current Balance</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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" />
          </svg>
        </div>
        <p class="text-3xl font-bold text-stone-800 dark:text-stone-50 mb-2">$12,345.67</p>
        <p class="text-sm text-stone-500 dark:text-stone-400">Available funds</p>
      </div>

      <!-- Card 2: Recent Transactions -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Recent Activity</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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" />
          </svg>
        </div>
        <ul class="space-y-3">
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Netflix Subscription</span>
            <span class="font-medium text-red-600 dark:text-red-400">-$15.99</span>
          </li>
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Salary Deposit</span>
            <span class="font-medium text-emerald-600 dark:text-emerald-400">+$2,500.00</span>
          </li>
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Coffee Shop</span>
            <span class="font-medium text-red-600 dark:text-red-400">-$4.50</span>
          </li>
        </ul>
        <a href="#" class="mt-4 block text-center text-sm text-amber-600 dark:text-amber-400 hover:underline">View all transactions</a>
      </div>

      <!-- Card 3: Savings Goal -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Savings Goal</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-sky-500 dark:text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0V6a1 1 0 011-1h2a1 1 0 011 1v13m-6 0h6" />
          </svg>
        </div>
        <p class="text-2xl font-bold text-stone-800 dark:text-stone-50">$5,000 / $10,000</p>
        <div class="w-full bg-stone-200 dark:bg-zinc-700 rounded-full h-2.5 mt-2 mb-3">
          <div class="bg-sky-500 dark:bg-sky-400 h-2.5 rounded-full" style="width: 50%"></div>
        </div>
        <p class="text-sm text-stone-500 dark:text-stone-400">50% achieved for 'New Car Fund'</p>
        <a href="#" class="mt-4 block text-center text-sm text-amber-600 dark:text-amber-400 hover:underline">Manage goals</a>
      </div>

    </div>

    <!-- Optional: Footer or Disclaimer -->
    <p class="mt-8 text-center text-sm text-stone-500 dark:text-zinc-600">
      Data as of <time datetime="2023-10-27">October 27, 2023</time>. Subject to change.
    </p>
  </div>
</div>