Componente de panel de control simple

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-blue-600 dark:text-blue-400">$12,345</p>
        <span class="text-green-500 dark:text-green-400">+5.2%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">New Users</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-purple-600 dark:text-purple-400">1,234</p>
        <span class="text-red-500 dark:text-red-400">-1.1%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-full">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
      <ul>
        <li class="flex items-center mb-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Purchased a product</p>
          </div>
        </li>
         <li class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Left a review</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>