Bootstrap Components

<section class="position-relative py-24 pt-lg-40 bg-light overflow-hidden">
  <div class="container">
    <div class="row mb-20">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="position-relative h-100 pt-20 pb-52 px-8 px-md-12 bg-white rounded">
          <div class="mb-16 pb-5 border-bottom">
            <h4 class="display-6 mb-0">Files</h4>
          </div>
          <div class="d-flex mb-14 align-items-center">
            <img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt="">
            <span class="ms-8">All inspirations</span>
          </div>
          <div class="d-flex mb-14 align-items-center">
            <img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt="">
            <span class="ms-8">Bathroom design</span>
          </div>
          <div class="d-flex align-items-center">
            <img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt="">
            <span class="ms-8">Songs</span>
          </div>
          <a class="position-absolute bottom-0 start-0 ms-12 mb-24 btn mt-auto btn-primary" href="#">All files</a>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="pt-20 pb-24 px-8 px-md-12 bg-white rounded">
          <div class="d-sm-flex align-items-center justify-content-between mb-14 pb-5 border-bottom">
            <h4 class="display-6 mb-4 mb-md-0">Teamwork</h4>
            <select class="form-select rounded-1 py-1 ps-8" aria-label="New select example" style="max-width: max-content;">
              <option selected="">New</option>
              <option value="1">Old</option>
            </select>
          </div>
          <div class="table-responsive pb-6 px-4 w-100 mb-16" style="width: min-content;">
            <table class="table table-borderless mb-0" style="min-width: max-content;">
              <thead></thead>
              <tbody>
                <tr class="align-middle">
                  <th class="pb-6" scope="row">
                    <div class="d-flex align-items-center pe-6 position-relative">
                      <div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div>
                      <img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt="">
                      <span class="ms-8">Bathroom design</span>
                    </div>
                  </th>
                  <td class="pb-6">
                    <div class="d-flex align-items-center px-12">
                      <img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="btn ms-3 p-0 text-secondary-light" 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="pe-12 pb-6">
                    <span class="text-secondary">Today, 9:44 AM</span>
                  </td>
                  <td class="pb-6">
                    <a class="btn d-flex align-items-center p-0 text-success" 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="ms-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr class="align-middle">
                  <th class="pb-6" scope="row">
                    <div class="d-flex align-items-center pe-6 position-relative">
                      <div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div>
                      <img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt="">
                      <span class="ms-8">Photos.zip</span>
                    </div>
                  </th>
                  <td class="pb-6">
                    <div class="d-flex align-items-center px-12">
                      <img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="btn ms-3 p-0 text-secondary-light" 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="pe-12 pb-6">
                    <span class="text-secondary">Today, 9:44 AM</span>
                  </td>
                  <td class="pb-6">
                    <a class="btn d-flex align-items-center p-0 text-success" 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="ms-3">Details</span>
                    </a>
                  </td>
                </tr>
                <tr class="align-middle">
                  <th scope="row">
                    <div class="d-flex align-items-center pe-6 position-relative">
                      <div class="position-absolute top-50 end-0 translate-middle-y rounded bg-secondary" style="width: 1px; height: 12px;"></div>
                      <img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt="">
                      <span class="ms-8">Songs that feel like winter</span>
                    </div>
                  </th>
                  <td>
                    <div class="d-flex align-items-center px-12">
                      <img class="img-fluid rounded-circle" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-women1.png" alt="">
                      <img class="img-fluid rounded-circle ms-n2" style="width: 45px; height: 45px;" src="wrexa-assets/images/avatar-male2.png" alt="">
                      <a class="btn ms-3 p-0 text-secondary-light" 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="pe-12">
                    <span class="text-secondary">Today, 9:44 AM</span>
                  </td>
                  <td>
                    <a class="btn d-flex align-items-center p-0 text-success" 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="ms-3">Details</span>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="mb-n4"><a class="btn mb-4 me-4 btn-primary" href="#">Sign in</a><a class="btn mb-4 btn-outline-dark" href="#">More Scores</a></div>
        </div>
      </div>
    </div>
    <a class="btn d-flex mx-auto align-items-center justify-content-center p-0" href="#" style="width: 136px; height: 136px; background-image: url('wrexa-assets/elements/circle-border-light.svg'); background-size: contain;">
      <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="#252525"></path>
      </svg>
    </a>
  </div>
</section>