Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

<div class="overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700">
  <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
    <thead class="bg-gray-50 dark:bg-gray-800">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider
                   text-gray-500 dark:text-gray-400">Name</th>
        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider
                   text-gray-500 dark:text-gray-400">Status</th>
        <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider
                   text-gray-500 dark:text-gray-400">Amount</th>
      </tr>
    </thead>
    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800">
      <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">Alice</td>
        <td class="px-6 py-4">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                       bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
            Active
          </span>
        </td>
        <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">$1,234</td>
      </tr>
      <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
        <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">Bob</td>
        <td class="px-6 py-4">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                       bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
            Pending
          </span>
        </td>
        <td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">$567</td>
      </tr>
    </tbody>
  </table>
</div>