ダッシュボードコンポーネント

<section class="p-8 dark:bg-gray-900 dark:text-white">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Sales Overview</h3>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>

      <!-- Card 2 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Revenue Analysis</h3>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>

      <!-- Card 3 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Customer Growth</h3>
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>

      <!-- Card 4 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Marketing Performance</h3>
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <!-- Card 5 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Inventory Status</h3>
        <p class="text-gray-700 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>

      <!-- Card 6 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Website Traffic</h3>
        <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
      </div>

    </div>
  </div>
</section>