Table

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Simple Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
          <tr>
            <th class="px-6 py-3">Name</th>
            <th class="px-6 py-3">Age</th>
            <th class="px-6 py-3">Gender</th>
            <th class="px-6 py-3">Occupation</th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-sm text-gray-700">
          <tr>
            <td class="px-6 py-3">Alice</td>
            <td class="px-6 py-3">32</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3">Software Engineer</td>
          </tr>
          <tr>
            <td class="px-6 py-3">Bob</td>
            <td class="px-6 py-3">28</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3">Data Scientist</td>
          </tr>
          <tr>
            <td class="px-6 py-3">Charlie</td>
            <td class="px-6 py-3">35</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3">Project Manager</td>
          </tr>
          <tr>
            <td class="px-6 py-3">Daisy</td>
            <td class="px-6 py-3">29</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3">Graphic Designer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Simple Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-sm text-gray-700">
          <tr>
            <th class="px-6 py-3 text-left">Name</th>
            <th class="px-6 py-3">Age</th>
            <th class="px-6 py-3">Gender</th>
            <th class="px-6 py-3 text-right">Occupation</th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-center text-sm text-gray-700">
          <tr>
            <td class="px-6 py-3 text-left">Alice</td>
            <td class="px-6 py-3">32</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3 text-right">Software Engineer</td>
          </tr>
          <tr>
            <td class="px-6 py-3 text-left">Bob</td>
            <td class="px-6 py-3">28</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3 text-right">Data Scientist</td>
          </tr>
          <tr>
            <td class="px-6 py-3 text-left">Charlie</td>
            <td class="px-6 py-3">35</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3 text-right">Project Manager</td>
          </tr>
          <tr>
            <td class="px-6 py-3 text-left">Daisy</td>
            <td class="px-6 py-3">29</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3 text-right">Graphic Designer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Simple Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
          <tr>
            <th class="px-6 py-3">Name</th>
            <th class="px-6 py-3">Age</th>
            <th class="px-6 py-3">Gender</th>
            <th class="px-6 py-3">Occupation</th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-sm text-gray-700">
          <tr class="even:bg-gray-50">
            <td class="px-6 py-3">Alice</td>
            <td class="px-6 py-3">32</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3">Software Engineer</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="px-6 py-3">Bob</td>
            <td class="px-6 py-3">28</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3">Data Scientist</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="px-6 py-3">Charlie</td>
            <td class="px-6 py-3">35</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3">Project Manager</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="px-6 py-3">Daisy</td>
            <td class="px-6 py-3">29</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3">Graphic Designer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Simple Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
          <tr class="divide-x divide-gray-200">
            <th class="px-6 py-3">Name</th>
            <th class="px-6 py-3">Age</th>
            <th class="px-6 py-3">Gender</th>
            <th class="px-6 py-3">Occupation</th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-sm text-gray-700">
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Alice</td>
            <td class="px-6 py-3">32</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3">Software Engineer</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Bob</td>
            <td class="px-6 py-3">28</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3">Data Scientist</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Charlie</td>
            <td class="px-6 py-3">35</td>
            <td class="px-6 py-3">Male</td>
            <td class="px-6 py-3">Project Manager</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Daisy</td>
            <td class="px-6 py-3">29</td>
            <td class="px-6 py-3">Female</td>
            <td class="px-6 py-3">Graphic Designer</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Simple Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
          <tr>
            <th class="px-6 py-3">Name</th>
            <th class="px-6 py-3">Age</th>
            <th class="px-6 py-3">Gender</th>
            <th class="px-6 py-3">Occupation</th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-sm text-gray-700">
          <tr>
            <td colspan="4" class="h-48 px-6 py-3 text-center">
              No records found. <a href="#" class="font-medium text-blue-500">Click here</a> to search again.
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="overflow-x-auto">
  <div class="inline-block min-w-full align-middle">
    <table class="w-full border-separate border-spacing-0">
      <caption class="sr-only">
        Simple Table
      </caption>
      <thead class="text-left text-sm uppercase text-gray-700">
        <tr>
          <th class="border-y border-l border-gray-200 bg-gray-100 px-6 py-2.5 sm:rounded-l-lg">Name</th>
          <th class="border-y border-gray-200 bg-gray-100 px-6 py-2.5">Age</th>
          <th class="border-y border-gray-200 bg-gray-100 px-6 py-2.5">Gender</th>
          <th class="border-y border-r border-gray-200 bg-gray-100 px-6 py-2.5 sm:rounded-r-lg">Occupation</th>
        </tr>
      </thead>
      <tbody class="text-sm text-gray-700">
        <tr>
          <td class="px-6 py-3">Alice</td>
          <td class="px-6 py-3">32</td>
          <td class="px-6 py-3">Female</td>
          <td class="px-6 py-3">Software Engineer</td>
        </tr>
        <tr>
          <td class="border-t border-gray-200 px-6 py-3">Bob</td>
          <td class="border-t border-gray-200 px-6 py-3">28</td>
          <td class="border-t border-gray-200 px-6 py-3">Male</td>
          <td class="border-t border-gray-200 px-6 py-3">Data Scientist</td>
        </tr>
        <tr>
          <td class="border-t border-gray-200 px-6 py-3">Charlie</td>
          <td class="border-t border-gray-200 px-6 py-3">35</td>
          <td class="border-t border-gray-200 px-6 py-3">Male</td>
          <td class="border-t border-gray-200 px-6 py-3">Project Manager</td>
        </tr>
        <tr>
          <td class="border-t border-gray-200 px-6 py-3">Daisy</td>
          <td class="border-t border-gray-200 px-6 py-3">29</td>
          <td class="border-t border-gray-200 px-6 py-3">Female</td>
          <td class="border-t border-gray-200 px-6 py-3">Graphic Designer</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Product Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
          <tr>
            <th class="w-px whitespace-nowrap p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </th>
            <th class="px-6 py-3">Product Name</th>
            <th class="px-6 py-3">Price</th>
            <th class="px-6 py-3">Rating</th>
            <th class="px-6 py-3">Category</th>
            <th class="px-6 py-3">In Stock</th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-sm text-gray-700">
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Apple iPhone X</td>
            <td class="px-6 py-3">$999.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Cell Phones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Samsung Galaxy S20</td>
            <td class="px-6 py-3">$799.99</td>
            <td class="px-6 py-3">4.0</td>
            <td class="px-6 py-3">Cell Phones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Google Pixel 4</td>
            <td class="px-6 py-3">$799.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Cell Phones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Dell XPS 13</td>
            <td class="px-6 py-3">$999.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Laptops</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">MacBook Pro</td>
            <td class="px-6 py-3">$1,299.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Laptops</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Lenovo ThinkPad X1 Carbon</td>
            <td class="px-6 py-3">$1,199.99</td>
            <td class="px-6 py-3">4.0</td>
            <td class="px-6 py-3">Laptops</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Bose QuietComfort 35 II</td>
            <td class="px-6 py-3">$349.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Sony WH-1000XM4</td>
            <td class="px-6 py-3">$349.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Sennheiser HD 660 S</td>
            <td class="px-6 py-3">$449.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">No</td>
          </tr>
          <tr class="even:bg-gray-50">
            <td class="p-3">
              <input type="checkbox" class="size-5 rounded-md border-gray-300 text-indigo-500 focus:ring-indigo-300" />
            </td>
            <td class="px-6 py-3">Beyerdynamic DT 990 Pro</td>
            <td class="px-6 py-3">$169.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">No</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
  <div class="overflow-x-auto">
    <div class="inline-block min-w-full align-middle">
      <table class="w-full">
        <caption class="sr-only">
          Product Table
        </caption>
        <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
          <tr class="divide-x divide-gray-200">
            <th class="px-6 py-3">Product Name</th>
            <th class="px-6 py-3">
              <button class="flex w-full items-center justify-between space-x-2">
                <span>Price</span>
                <!-- Heroicons name: mini/chevron-up-down -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                  <path
                    fill-rule="evenodd"
                    d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>
            </th>
            <th class="px-6 py-3">
              <button class="flex w-full items-center justify-between space-x-2">
                <span>Rating</span>
                <!-- Heroicons name: mini/chevron-up-down -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                  <path
                    fill-rule="evenodd"
                    d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>
            </th>
            <th class="px-6 py-3">
              <button class="flex w-full items-center justify-between space-x-2">
                <span>Category</span>
                <!-- Heroicons name: mini/chevron-up-down -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                  <path
                    fill-rule="evenodd"
                    d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>
            </th>
            <th class="px-6 py-3">
              <button class="flex w-full items-center justify-between space-x-2">
                <span>In Stock</span>
                <!-- Heroicons name: mini/bars-arrow-down -->
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                  <path
                    fill-rule="evenodd"
                    d="M2 3.75A.75.75 0 012.75 3h11.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zM2 7.5a.75.75 0 01.75-.75h7.508a.75.75 0 010 1.5H2.75A.75.75 0 012 7.5zM14 7a.75.75 0 01.75.75v6.59l1.95-2.1a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 111.1-1.02l1.95 2.1V7.75A.75.75 0 0114 7zM2 11.25a.75.75 0 01.75-.75h4.562a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z"
                    clip-rule="evenodd"
                  />
                </svg>
              </button>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y border-gray-200 text-sm text-gray-700">
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Apple iPhone X</td>
            <td class="px-6 py-3">$999.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Cell Phones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Samsung Galaxy S20</td>
            <td class="px-6 py-3">$799.99</td>
            <td class="px-6 py-3">4.0</td>
            <td class="px-6 py-3">Cell Phones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Google Pixel 4</td>
            <td class="px-6 py-3">$799.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Cell Phones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Dell XPS 13</td>
            <td class="px-6 py-3">$999.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Laptops</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">MacBook Pro</td>
            <td class="px-6 py-3">$1,299.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Laptops</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Lenovo ThinkPad X1 Carbon</td>
            <td class="px-6 py-3">$1,199.99</td>
            <td class="px-6 py-3">4.0</td>
            <td class="px-6 py-3">Laptops</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Bose QuietComfort 35 II</td>
            <td class="px-6 py-3">$349.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Sony WH-1000XM4</td>
            <td class="px-6 py-3">$349.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">Yes</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Sennheiser HD 660 S</td>
            <td class="px-6 py-3">$449.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">No</td>
          </tr>
          <tr class="divide-x divide-gray-200">
            <td class="px-6 py-3">Beyerdynamic DT 990 Pro</td>
            <td class="px-6 py-3">$169.99</td>
            <td class="px-6 py-3">4.5</td>
            <td class="px-6 py-3">Headphones</td>
            <td class="px-6 py-3">No</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="sm:p-6">
  <div class="overflow-hidden border border-gray-200 shadow sm:rounded-lg">
    <div class="overflow-x-auto">
      <div class="inline-block min-w-full align-middle">
        <table class="w-full">
          <thead class="border-b border-gray-200 bg-gray-100 text-left text-sm text-gray-700">
            <tr>
              <th class="px-6 py-3">Full Name</th>
              <th class="px-6 py-3">Status</th>
              <th class="px-6 py-3">Permissions</th>
              <th class="px-6 py-3">Email</th>
              <th class="px-6 py-3">Phone</th>
              <th class="w-px whitespace-nowrap px-6 py-3"></th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 text-sm text-gray-700">
            <tr>
              <td class="px-6 py-3">
                <div class="flex items-center space-x-3">
                  <img
                    class="block size-9 shrink-0 rounded-full border-2 border-gray-200"
                    src="https://composedui.com/img/avatar-1.jpeg"
                    alt="Avatar"
                    width="36"
                    height="36"
                  />
                  <span class="font-medium">Alice Smith</span>
                </div>
              </td>
              <td class="px-6 py-3">
                <span
                  class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-green-300 bg-green-100 px-2 font-medium text-green-500"
                >
                  Active
                </span>
              </td>
              <td class="px-6 py-3">Admin</td>
              <td class="whitespace-nowrap px-6 py-3">
                <a href="#">alice.smith@gmail.com</a>
              </td>
              <td class="whitespace-nowrap px-6 py-3">555-555-1212</td>
              <td class="px-6 py-3">
                <div class="relative inline-block align-middle">
                  <button>
                    <!-- Heroicons name: outline/ellipsis-vertical -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-3">
                <div class="flex items-center space-x-3">
                  <img
                    class="block size-9 shrink-0 rounded-full border-2 border-gray-200"
                    src="https://composedui.com/img/avatar-2.jpeg"
                    alt="Avatar"
                    width="36"
                    height="36"
                  />
                  <span class="font-medium">Bob Johnson</span>
                </div>
              </td>
              <td class="px-6 py-3">
                <span
                  class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-orange-300 bg-orange-100 px-2 font-medium text-orange-500"
                >
                  Pending
                </span>
              </td>
              <td class="px-6 py-3">User</td>
              <td class="whitespace-nowrap px-6 py-3">
                <a href="#">bob.johnson@yahoo.com</a>
              </td>
              <td class="whitespace-nowrap px-6 py-3">555-555-1213</td>
              <td class="px-6 py-3">
                <div class="relative inline-block align-middle">
                  <button>
                    <!-- Heroicons name: outline/ellipsis-vertical -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-3">
                <div class="flex items-center space-x-3">
                  <img
                    class="block size-9 shrink-0 rounded-full border-2 border-gray-200"
                    src="https://composedui.com/img/avatar-3.jpeg"
                    alt="Avatar"
                    width="36"
                    height="36"
                  />
                  <span class="font-medium">Charlie Williams</span>
                </div>
              </td>
              <td class="px-6 py-3">
                <span
                  class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-gray-300 bg-gray-100 px-2 font-medium text-gray-500"
                >
                  Cancelled
                </span>
              </td>
              <td class="px-6 py-3">User</td>
              <td class="whitespace-nowrap px-6 py-3">
                <a href="#">charlie.williams@gmail.com</a>
              </td>
              <td class="whitespace-nowrap px-6 py-3">555-555-1214</td>
              <td class="px-6 py-3">
                <div class="relative inline-block align-middle">
                  <button>
                    <!-- Heroicons name: outline/ellipsis-vertical -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-3">
                <div class="flex items-center space-x-3">
                  <img
                    class="block size-9 shrink-0 rounded-full border-2 border-gray-200"
                    src="https://composedui.com/img/avatar-4.jpeg"
                    alt="Avatar"
                    width="36"
                    height="36"
                  />
                  <span class="font-medium">Daisy Brown</span>
                </div>
              </td>
              <td class="px-6 py-3">
                <span
                  class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-green-300 bg-green-100 px-2 font-medium text-green-500"
                >
                  Active
                </span>
              </td>
              <td class="px-6 py-3">Admin</td>
              <td class="whitespace-nowrap px-6 py-3">
                <a href="#">daisy.brown@gmail.com</a>
              </td>
              <td class="whitespace-nowrap px-6 py-3">555-555-1215</td>
              <td class="px-6 py-3">
                <div class="relative inline-block align-middle">
                  <button>
                    <!-- Heroicons name: outline/ellipsis-vertical -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-3">
                <div class="flex items-center space-x-3">
                  <img
                    class="block size-9 shrink-0 rounded-full border-2 border-gray-200"
                    src="https://composedui.com/img/avatar-1.jpeg"
                    alt="Avatar"
                    width="36"
                    height="36"
                  />
                  <span class="font-medium">Ethan Johnson</span>
                </div>
              </td>
              <td class="px-6 py-3">
                <span
                  class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-gray-300 bg-gray-100 px-2 font-medium text-gray-500"
                >
                  Cancelled
                </span>
              </td>
              <td class="px-6 py-3">User</td>
              <td class="whitespace-nowrap px-6 py-3">
                <a href="#">ethan.johnson@yahoo.com</a>
              </td>
              <td class="whitespace-nowrap px-6 py-3">555-555-1216</td>
              <td class="px-6 py-3">
                <div class="relative inline-block align-middle">
                  <button>
                    <!-- Heroicons name: outline/ellipsis-vertical -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <td class="px-6 py-3">
                <div class="flex items-center space-x-3">
                  <img
                    class="block size-9 shrink-0 rounded-full border-2 border-gray-200"
                    src="https://composedui.com/img/avatar-2.jpeg"
                    alt="Avatar"
                    width="36"
                    height="36"
                  />
                  <span class="font-medium">Fiona Smith</span>
                </div>
              </td>
              <td class="px-6 py-3">
                <span
                  class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-orange-300 bg-orange-100 px-2 font-medium text-orange-500"
                >
                  Pending
                </span>
              </td>
              <td class="px-6 py-3">Admin</td>
              <td class="whitespace-nowrap px-6 py-3">
                <a href="#">fiona.smith@gmail.com</a>
              </td>
              <td class="whitespace-nowrap px-6 py-3">555-555-1217</td>
              <td class="px-6 py-3">
                <div class="relative inline-block align-middle">
                  <button>
                    <!-- Heroicons name: outline/ellipsis-vertical -->
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"
                      />
                    </svg>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>