Neumorfismo Cuadrícula del panel de control

<div class="dark:bg-gray-900 dark:text-white min-h-screen p-10">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-10">

    <!-- Card 1 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Orders</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">1,234</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-green-400 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v10m0-10a5 5 0 110 10v-10z" />
        </svg>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Revenue</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">$12,345</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-blue-400 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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-2zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Customers</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">456</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-red-400 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2h5v-2a3 3 0 013-3h1a3 3 0 013 3v2zm-7-2a3 3 0 003 3h1a3 3 0 003-3M12 8a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="dark:bg-gray-800 bg-gray-200 dark:shadow-xl shadow-md rounded-lg p-6">
      <h2 class="text-xl font-semibold mb-4">Products</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-bold">789</p>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 dark:text-yellow-400 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
        </svg>
      </div>
    </div>

  </div>
</div>