Tables

                  
<!-- table default -->
<div class="overflow-x-auto">
  <table class="min-w-full backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-neutral-200 dark:border-neutral-400 rounded mklausjenrhtm">
    <thead class="backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border-b border-neutral-200 dark:border-neutral-400">
      <tr>
        <th class="uajskeiolksb py-3 text-left">Customer</th>
        <th class="uajskeiolksb py-3 text-left">Email</th>
        <th class="uajskeiolksb py-3 text-left">Revenue</th>
        <th class="uajskeiolksb py-3 text-left">Status</th>
        <th class="uajskeiolksb py-3 text-left">City</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-400">
      <tr class="hover:bg-purple-100 dark:hover:bg-black/10">
        <td class="uajskeiolksb py-2 flex layhetgsjdcb space-x-3">
          <img src="../src/img/avatars/male2.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
          <div>
            <div class="font-medium">John Doe</div>
            <div class="text-sm text-purple-500 dark:text-purple-300">Software Engineer</div>
          </div>
        </td>
        <td class="uajskeiolksb py-2">john.doe@example.com</td>
        <td class="uajskeiolksb py-2">$120,000</td>
        <td class="uajskeiolksb py-2">
          <!-- badge -->
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">
            Active
          </span>
        </td>
        <td class="uajskeiolksb py-2">New York</td>
      </tr>
      <tr class="hover:bg-purple-100 dark:hover:bg-black/10">
        <td class="uajskeiolksb py-2 flex layhetgsjdcb space-x-3">
          <img src="../src/img/avatars/male3.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
          <div>
            <div class="font-medium">James Smith</div>
            <div class="text-sm text-purple-500 dark:text-purple-300">Product Manager</div>
          </div>
        </td>
        <td class="uajskeiolksb py-2">james.smith@example.com</td>
        <td class="uajskeiolksb py-2">$95,000</td>
        <td class="uajskeiolksb py-2">
          <!-- badge -->
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">
            Active
          </span>
        </td>
        <td class="uajskeiolksb py-2">San Francisco</td>
      </tr>
      <tr class="hover:bg-purple-100 dark:hover:bg-black/10">
        <td class="uajskeiolksb py-2 flex layhetgsjdcb space-x-3">
          <img src="../src/img/avatars/male4.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
          <div>
            <div class="font-medium">Mike Johnson</div>
            <div class="text-sm text-purple-500 dark:text-purple-300">UX Designer</div>
          </div>
        </td>
        <td class="uajskeiolksb py-2">mike.johnson@example.com</td>
        <td class="uajskeiolksb py-2">$85,000</td>
        <td class="uajskeiolksb py-2">
          <!-- badge -->
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">
            Active
          </span>
        </td>
        <td class="uajskeiolksb py-2">Los Angeles</td>
      </tr>
    </tbody>
  </table>
</div>
                  
                

                  
<!-- table sorter -->
<div class="relative w-full overflow-y-auto">
  <table class="table-sorter table-default min-w-full divide-y divide-black border border-black">
    <thead>
      <tr>
        <th scope="col" data-sortable="false">
          Name
        </th>
        <th scope="col">
          Email
        </th>
        <th scope="col">
          Revenue
        </th>
        <th scope="col">
          Status
        </th>
        <th scope="col">
          City
        </th>
        <th scope="col" data-sortable="false">
          Action
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male2.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">John Doe</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Software Engineer</div>
            </div>
          </div>
        </td>
        <td>john.doe@example.com</td>
        <td>$120,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>New York</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male3.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">James Smith</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Product Manager</div>
            </div>
          </div>
        </td>
        <td>james.smith@example.com</td>
        <td>$110,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>San Francisco</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male4.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Mike Johnson</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">DevOps Engineer</div>
            </div>
          </div>
        </td>
        <td>mike.johnson@example.com</td>
        <td>$115,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Inactive</span>
        </td>
        <td>Chicago</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male5.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Emily Davis</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">UI/UX Designer</div>
            </div>
          </div>
        </td>
        <td>emily.davis@example.com</td>
        <td>$100,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Los Angeles</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
          <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male6.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">James Brown</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Backend Developer</div>
            </div>
          </div>
        </td>
        <td>james.brown@example.com</td>
        <td>$125,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Houston</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male2.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Jeremy White</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Frontend Developer</div>
            </div>
          </div>
        </td>
        <td>jeremy.white@example.com</td>
        <td>$110,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Inactive</span>
        </td>
        <td>Austin</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male1.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">David Wilson</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Project Manager</div>
            </div>
          </div>
        </td>
        <td>david.wilson@example.com</td>
        <td>$130,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Seattle</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/female1.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Sarah Miller</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">QA Engineer</div>
            </div>
          </div>
        </td>
        <td>sarah.miller@example.com</td>
        <td>$95,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Denver</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male1.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Daniel Martinez</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Fullstack Developer</div>
            </div>
          </div>
        </td>
        <td>daniel.martinez@example.com</td>
        <td>$120,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Dallas</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/female2.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Sophia Taylor</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Marketing Specialist</div>
            </div>
          </div>
        </td>
        <td>sophia.taylor@example.com</td>
        <td>$85,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Phoenix</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male3.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Chris Anderson</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Data Scientist</div>
            </div>
          </div>
        </td>
        <td>chris.anderson@example.com</td>
        <td>$140,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Inactive</span>
        </td>
        <td>Miami</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/female3.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Olivia Harris</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">HR Manager</div>
            </div>
          </div>
        </td>
        <td>olivia.harris@example.com</td>
        <td>$95,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Boston</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male4.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Michael Scott</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">Operations Manager</div>
            </div>
          </div>
        </td>
        <td>michael.scott@example.com</td>
        <td>$115,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Chicago</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/female4.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Emma Thompson</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">UX/UI Designer</div>
            </div>
          </div>
        </td>
        <td>emma.thompson@example.com</td>
        <td>$105,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>Los Angeles</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
      <tr>
        <td>
          <div class="flex layhetgsjdcb gap-3">
            <img src="../src/img/avatars/male5.jpg" alt="Avatar" class="w-10 h-10 boalstehwqbj">
            <div>
              <div class="font-medium text-neutral-900 dark:text-white">Ethan Lewis</div>
              <div class="text-sm text-purple-500 dark:text-purple-300">DevOps Engineer</div>
            </div>
          </div>
        </td>
        <td>ethan.lewis@example.com</td>
        <td>$130,000</td>
        <td>
          <span class="inline-flex px-3 py-1.5 bg-green-100 text-green-700 dark:bg-green-500/50 dark:text-green-100 text-xs leading-none font-medium boalstehwqbj">Active</span>
        </td>
        <td>San Francisco</td>
        <td>
          <button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 dark:bg-purple-300 dark:text-black hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
            <i class="bi bi-pencil-square"></i>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>