Taobin-Recipe-Manager/client/src/app/features/dashboard/dashboard.component.html

<main class="relative overflow-hidden shadow-md sm:rounded-lg">
  <table class="w-full text-sm text-left text-gray-500">
    <caption
      class="p-5 text-lg font-semibold text-left text-gray-900 bg-primary"
    ></caption>
    <thead class="text-xs text-gray-700 uppercase bg-secondary">
      <tr>
        <th scope="col" class="px-6 py-3">Product name</th>
        <th scope="col" class="px-6 py-3">Color</th>
        <th scope="col" class="px-6 py-3">Category</th>
        <th scope="col" class="px-6 py-3 sm:hidden md:block">Price</th>
        <th scope="col" class="px-6 py-3">
          <span class="sr-only">Edit</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
        <th
          scope="row"
          class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
        >
          Apple MacBook Pro 17"
        </th>
        <td class="px-6 py-4">Silver</td>
        <td class="px-6 py-4">Laptop</td>
        <td class="px-6 py-4 sm:hidden md:block">$2999</td>
        <td class="px-6 py-4 text-right">
          <a
            href="#"
            class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
            >Edit</a
          >
        </td>
      </tr>
    </tbody>
  </table>
</main>