<div className="w-full overflow-x-auto px-4">
  <div className="w-full min-w-[60rem] lg:min-w-full">
    <table className="w-full bg-card-background p-6 text-sm">
      <thead className="p-2 text-base">
        <tr className="border-y border-accent/20">
          <th className="px-2 py-4 text-left">
            <input type="checkbox" name="all" id="" />
          </th>
          <th className="px-2 py-4 text-left">Employee</th>
          <th className="px-2 py-4 text-left">Id</th>
          <th className="px-2 py-4 text-left">Department</th>
          <th className="px-2 py-4 text-left">Salary (US Dollar)</th>
          <th className="px-2 py-4 text-left">Phone</th>
          <th className="px-2 py-4 text-left">Actions</th>
        </tr>
      </thead>
      <tbody className="p-2">
        <tr className="border-y border-accent/20 bg-background">
          <td className="p-2">
            <input type="checkbox" name="" id="" />
          </td>
          <td className="p-2 font-bold">
            <div className="flex items-center gap-2">
              <div>
                <img
                  src="https://randomuser.me/api/portraits/men/2.jpg"
                  alt="avatar"
                  className="h-12 w-12 rounded-full ring-1 ring-inset ring-accent/20"
                />
              </div>
              <div>
                <p>Jhon Doe</p>
                <small>doe@fake.com</small>
              </div>
            </div>
          </td>
          <td className="p-2">992356</td>
          <td className="p-2">Develovment</td>
          <td className="p-2">$50000</td>
          <td className="p-2">+1 123 456 7893</td>
          <td className="p-2 text-xs font-medium">
            <div className="flex w-fit items-center space-x-1 px-3 py-0.5">
              <button
                className="rounded-md bg-accent/10 p-1 ring-1 ring-inset ring-accent/20 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
                  />
                  <path d="M13.5 6.5l4 4" />
                </svg>
              </button>
              <button
                className="rounded-md bg-danger/10 p-1 text-danger ring-1 ring-inset ring-danger/40 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M4 7l16 0" />
                  <path d="M10 11l0 6" />
                  <path d="M14 11l0 6" />
                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                </svg>
              </button>
            </div>
          </td>
        </tr>
        <tr className="border-y border-accent/20 bg-card-background">
          <td className="p-2">
            <input type="checkbox" name="" id="" />
          </td>
          <td className="p-2 font-bold">
            <div className="flex items-center gap-2">
              <div>
                <img
                  src="https://randomuser.me/api/portraits/men/2.jpg"
                  alt="avatar"
                  className="h-12 w-12 rounded-full ring-1 ring-inset ring-accent/20"
                />
              </div>
              <div>
                <p>Jhon Doe</p>
                <small>doe@fake.com</small>
              </div>
            </div>
          </td>
          <td className="p-2">992356</td>
          <td className="p-2">Develovment</td>
          <td className="p-2">$50000</td>
          <td className="p-2">+1 123 456 7893</td>
          <td className="p-2 text-xs font-medium">
            <div className="flex w-fit items-center space-x-1 px-3 py-0.5">
              <button
                className="rounded-md bg-accent/10 p-1 ring-1 ring-inset ring-accent/20 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
                  />
                  <path d="M13.5 6.5l4 4" />
                </svg>
              </button>
              <button
                className="rounded-md bg-danger/10 p-1 text-danger ring-1 ring-inset ring-danger/40 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M4 7l16 0" />
                  <path d="M10 11l0 6" />
                  <path d="M14 11l0 6" />
                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                </svg>
              </button>
            </div>
          </td>
        </tr>
        <tr className="border-y border-accent/20 bg-background">
          <td className="p-2">
            <input type="checkbox" name="" id="" />
          </td>
          <td className="p-2 font-bold">
            <div className="flex items-center gap-2">
              <div>
                <img
                  src="https://randomuser.me/api/portraits/men/2.jpg"
                  alt="avatar"
                  className="h-12 w-12 rounded-full ring-1 ring-inset ring-accent/20"
                />
              </div>
              <div>
                <p>Jhon Doe</p>
                <small>doe@fake.com</small>
              </div>
            </div>
          </td>
          <td className="p-2">992356</td>
          <td className="p-2">Develovment</td>
          <td className="p-2">$50000</td>
          <td className="p-2">+1 123 456 7893</td>
          <td className="p-2 text-xs font-medium">
            <div className="flex w-fit items-center space-x-1 px-3 py-0.5">
              <button
                className="rounded-md bg-accent/10 p-1 ring-1 ring-inset ring-accent/20 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
                  />
                  <path d="M13.5 6.5l4 4" />
                </svg>
              </button>
              <button
                className="rounded-md bg-danger/10 p-1 text-danger ring-1 ring-inset ring-danger/40 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M4 7l16 0" />
                  <path d="M10 11l0 6" />
                  <path d="M14 11l0 6" />
                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                </svg>
              </button>
            </div>
          </td>
        </tr>
        <tr className="border-y border-accent/20 bg-card-background">
          <td className="p-2">
            <input type="checkbox" name="" id="" />
          </td>
          <td className="p-2 font-bold">
            <div className="flex items-center gap-2">
              <div>
                <img
                  src="https://randomuser.me/api/portraits/men/2.jpg"
                  alt="avatar"
                  className="h-12 w-12 rounded-full ring-1 ring-inset ring-accent/20"
                />
              </div>
              <div>
                <p>Jhon Doe</p>
                <small>doe@fake.com</small>
              </div>
            </div>
          </td>
          <td className="p-2">992356</td>
          <td className="p-2">Develovment</td>
          <td className="p-2">$50000</td>
          <td className="p-2">+1 123 456 7893</td>
          <td className="p-2 text-xs font-medium">
            <div className="flex w-fit items-center space-x-1 px-3 py-0.5">
              <button
                className="rounded-md bg-accent/10 p-1 ring-1 ring-inset ring-accent/20 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path
                    d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"
                  />
                  <path d="M13.5 6.5l4 4" />
                </svg>
              </button>
              <button
                className="rounded-md bg-danger/10 p-1 text-danger ring-1 ring-inset ring-danger/40 transition ease-in-out active:scale-95"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                  <path d="M4 7l16 0" />
                  <path d="M10 11l0 6" />
                  <path d="M14 11l0 6" />
                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                </svg>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
      <tfoot className="bg-background">
        <tr className="px-2 py-4">
          <td colspan="7">
            <p className="py-2 text-center">Updated 7 minutes ago</p>
          </td>
        </tr>
      </tfoot>
      <caption className="w-full text-center">
        Awesome Caption
      </caption>
    </table>
  </div>
</div>
#Simple Table

#Simple with Hover Effect

#User with Avatar and Action Buttons
