Data Tables Component

<div class="H-screen w-full bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 p-8 dark:from-gray-900 dark:via-gray-800 dark:to-black">
  <div class="mx-auto max-w-4xl rounded-lg bg-white bg-opacity-10 p-8 shadow-lg backdrop-blur-lg dark:bg-gray-700 dark:bg-opacity-20">
    <h2 class="mb-6 text-center text-4xl font-bold text-white drop-shadow-lg dark:text-gray-200">My Projects</h2>
    <div class="overflow-x-auto">
      <table class="min-w-full rounded-lg bg-white bg-opacity-5 text-left text-sm text-white shadow-md backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-5">
        <thead>
          <tr class="bg-gray-700 bg-opacity-20 text-gray-200 dark:bg-gray-900 dark:bg-opacity-30">
            <th class="px-6 py-3">Project Name</th>
            <th class="px-6 py-3">Category</th>
            <th class="px-6 py-3">Status</th>
            <th class="px-6 py-3">Preview</th>
          </tr>
        </thead>
        <tbody>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Vibrant Dash</td>
            <td class="px-6 py-4">Dashboard UI</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/vibrantdash/100/60" alt="Vibrant Dash Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">AquaFlow Landing</td>
            <td class="px-6 py-4">Website</td>
            <td class="px-6 py-4"><span class="rounded-full bg-yellow-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">In Progress</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/aquaflow/100/60" alt="AquaFlow Landing Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="border-b border-gray-600 border-opacity-30 hover:bg-gray-600 hover:bg-opacity-20 dark:border-gray-700 dark:border-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Neon Chatbot</td>
            <td class="px-6 py-4">Application</td>
            <td class="px-6 py-4"><span class="rounded-full bg-blue-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Planned</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/neonchatbot/100/60" alt="Neon Chatbot Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
          <tr class="hover:bg-gray-600 hover:bg-opacity-20 dark:hover:bg-gray-700 dark:hover:bg-opacity-30">
            <td class="px-6 py-4">Retro Portfolio</td>
            <td class="px-6 py-4">Portfolio</td>
            <td class="px-6 py-4"><span class="rounded-full bg-green-500 bg-opacity-70 px-3 py-1 text-xs font-semibold text-white">Completed</span></td>
            <td class="px-6 py-4">
              <img src="https://picsum.photos/seed/retroportfolio/100/60" alt="Retro Portfolio Preview" class="h-10 w-16 rounded object-cover shadow-md" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>