Material Design Triadic 仪表板卡片

<div class="p-4 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Metric Card 1 (Red/Pinkish) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-red-500 dark:bg-red-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-red-200 dark:border-red-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L19.5 7.5M9.75 17V10" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.5A.5.5 0 1013.5 15.5A.5.5 0 0013.5 16.5M17.5 12.5A.5.5 0 1017.5 11.5A.5.5 0 0017.5 12.5" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Total Sales</h3>
        <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 text-center mb-4">$12,345</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+5% from last month</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-red-600 dark:text-red-400 font-medium hover:underline text-sm">View Details</a>
      </div>
      <div class="absolute inset-0 bg-red-100 dark:bg-red-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 2 (Blue/Cyan) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-blue-500 dark:bg-blue-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-blue-200 dark:border-blue-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.892A13.914 13.914 0 0112 16c2.582 0 5.121.75 7.029 2.019M12 15a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">New Users</h3>
        <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 text-center mb-4">789</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+15% week over week</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-blue-600 dark:text-blue-400 font-medium hover:underline text-sm">User Analytics</a>
      </div>
      <div class="absolute inset-0 bg-blue-100 dark:bg-blue-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 3 (Green/Lime) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-green-500 dark:bg-green-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-green-200 dark:border-green-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18A9 9 0 0112 3z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Bounce Rate</h3>
        <p class="text-4xl font-extrabold text-green-600 dark:text-green-400 text-center mb-4">3.7<span class="text-xl">%</span></p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">-0.5% from previous period</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-green-600 dark:text-green-400 font-medium hover:underline text-sm">View Report</a>
      </div>
      <div class="absolute inset-0 bg-green-100 dark:bg-green-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

  </div>
</div>