Tables Components

<section class="pt-24 md:pt-40 pb-24 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-20">
      <div class="w-full xl:w-1/3 px-4 mb-16 xl:mb-0">
        <div class="flex flex-col h-full items-start px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl">
          <div class="w-full mb-16 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl">Files</h4>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="text-lg">All inspirations</span>
          </div>
          <div class="flex mb-14 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="text-lg">Bathroom design</span>
          </div>
          <div class="flex mb-20 items-center">
            <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="text-lg">Songs</span>
          </div>
          <a class="inline-block w-full sm:w-auto px-7 py-4 mt-auto text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">All files</a>
        </div>
      </div>
      <div class="w-full xl:w-2/3 px-4">
        <div class="px-6 sm:px-12 pt-16 pb-24 bg-white rounded-2xl">
          <div class="sm:flex justify-between items-center mb-10 pb-2 border-b border-gray-200">
            <h4 class="font-heading text-4xl mb-4 sm:mb-0">Teamwork</h4>
            <div class="pr-6 overflow-hidden border border-gray-300 rounded">
              <select class="pl-6 py-2 bg-white outline-none" aria-label="New select example" style="max-width: max-content;">
                <option selected="">New</option>
                <option value="1">Old</option>
              </select>
            </div>
          </div>
          <div class="overflow-x-auto px-4 mb-14">
            <table class="table-auto w-full min-w-max">
              <thead></thead>
              <tbody>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder1.svg" alt="">
                      <span class="font-normal text-lg">All inspirations</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex pl-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder2.svg" alt="">
                      <span class="font-normal text-lg">Photos.zip</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex px-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th class="py-5" scope="row">
                    <div class="flex pr-8 items-center">
                      <img class="block mr-8" src="wrexa-assets/elements/folder3.svg" alt="">
                      <span class="font-normal text-lg">Songs that feel like winter</span>
                    </div>
                  </th>
                  <td class="py-5">
                    <div class="relative flex px-12 items-center">
                      <div class="absolute top-1/2 left-0 transform -translate-y-1/2 px-px h-3 rounded-full bg-gray-200"></div>
                      <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="-ml-2 mr-2 w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="inline-block text-gray-200 hover:text-gray-300" href="#">
                        <svg width="25" height="25" viewbox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <circle cx="12.5" cy="12.5" r="11.25" fill="none" stroke="currentColor" stroke-width="2.5"></circle>
                          <path d="M16.6465 11.6543H13.4609V8.35352C13.4609 7.88086 13.0781 7.49805 12.6055 7.49805C12.1328 7.49805 11.75 7.88086 11.75 8.35352V11.6543H8.35156C7.88281 11.6543 7.5 12.0371 7.5 12.5098C7.5 12.9824 7.88281 13.3652 8.35547 13.3652H11.7539V16.6465C11.7539 17.1192 12.1367 17.502 12.6094 17.502C13.082 17.502 13.4648 17.1192 13.4648 16.6465V13.3652H16.6504C17.123 13.3652 17.5059 12.9824 17.5059 12.5098C17.5 12.0371 17.1191 11.6543 16.6465 11.6543Z" fill="currentColor"></path>
                          <defs><rect width="10" height="10" fill="white" transform="translate(7.5 7.5)"></rect></defs>
                        </svg>
                      </a>
                    </div>
                  </td>
                  <td class="px-12 py-5">
                    <span class="text-sm font-light">Today, 9:44 AM</span>
                  </td>
                  <td class="py-5">
                    <a class="inline-flex items-center text-green-800 hover:text-green-900" href="#">
                      <svg width="14" height="11" viewbox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.89471 0L6.81484 0.972812L11.0771 4.8125L0 4.8125L0 6.1875L11.0771 6.1875L6.81484 10.0272L7.89471 11L14 5.5L7.89471 0Z" fill="currentColor"></path>
                      </svg>
                      <span class="ml-3">Details</span>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div><a class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Sign in</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-gray-900 hover:text-gray-700 rounded" href="#">More Scores</a></div>
        </div>
      </div>
    </div>
    <div class="text-center">
      <a class="relative inline-flex items-center justify-center w-32 h-32 text-gray-800 hover:text-gray-700" href="#">
        <img class="absolute top-0 left-0 h-full w-full object-contain" src="wrexa-assets/elements/circle-border-light.svg" alt="">
        <svg width="12" height="32" viewbox="0 0 12 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.3109 -2.9239e-07L5.3109 29.4165L0.974389 25.1693L-1.88224e-07 26.1236L6 32L12 26.1236L11.0256 25.1693L6.6891 29.4165L6.6891 -2.32147e-07L5.3109 -2.9239e-07Z" fill="currentColor"></path>
        </svg>
      </a>
    </div>
  </div>
</section>