Team UI Components – Wrexa Library

<section class="pt-24 pb-24 md:pb-40 bg-gray-100">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24 sm:mb-44">
      <span class="font-heading text-xl">02</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Creative team</span>
    </div>
    <div class="relative z-10 max-w-3xl mb-40">
      <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl 3xl:text-7xl mb-10">“Alone we can do so little, together we can do so much.”</h1>
      <span class="text-xl font-medium">Helen Keller</span>
    </div>
    <div class="flex flex-wrap -mx-4 relative">
      <img class="absolute bottom-0 left-0 mb-56 w-full" src="wrexa-assets/elements/half-circles-triple.svg" alt="">
      <div class="w-full lg:w-1/3 px-4 mb-16 lg:mb-0">
        <div class="max-w-sm mx-auto relative">
          <div class="absolute top-0 left-0 -mt-2 w-full">
            <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
          </div>
          <div class="py-14 px-6 3xl:px-12 bg-white rounded-xl relative">
            <div class="flex flex-wrap items-start">
              <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 mb-6 md:mb-0 rounded-full border border-gray-200">
                <img class="w-18 h-18 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
              </div>
              <div class="w-full md:w-1/2 pl-7">
                <span class="text-sm text-gray-300">Co-Founder</span>
                <h4 class="text-2xl font-medium mt-1 mb-7">Hannah Redmond</h4>
                <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">Learn More</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4 mb-16 xl:mb-0 xl:mt-20">
        <div class="max-w-sm mx-auto relative">
          <div class="absolute top-0 left-0 -mt-2 w-full">
            <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
          </div>
          <div class="py-14 px-6 3xl:px-12 bg-white rounded-xl relative">
            <div class="flex flex-wrap items-start">
              <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 mb-6 md:mb-0 rounded-full border border-gray-200">
                <img class="w-18 h-18 rounded-full object-cover" src="wrexa-assets/images/avatar-male1.png" alt="">
              </div>
              <div class="w-full md:w-1/2 pl-7">
                <span class="text-sm text-gray-300">Co-Founder</span>
                <h4 class="text-2xl font-medium mt-1 mb-7">William Havi</h4>
                <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">Learn More</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4">
        <div class="max-w-sm mx-auto relative">
          <div class="absolute top-0 left-0 -mt-2 w-full">
            <div class="mx-5 rounded-t-xl h-4 bg-gray-200"></div>
          </div>
          <div class="py-14 px-6 3xl:px-12 bg-white rounded-xl relative">
            <div class="flex flex-wrap items-start">
              <div class="flex-shrink-0 flex items-center justify-center w-24 h-24 mb-6 md:mb-0 rounded-full border border-gray-200">
                <img class="w-18 h-18 rounded-full object-cover" src="wrexa-assets/images/avatar-male2.png" alt="">
              </div>
              <div class="w-full md:w-1/2 pl-7">
                <span class="text-sm text-gray-300">Design Director</span>
                <h4 class="text-2xl font-medium mt-1 mb-7">Ethan Orio O. Son</h4>
                <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">Learn More</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 bg-light">
  <div class="container">
    <div class="d-flex align-items-center mb-24 mb-md-44"><span class="display-6 h5 mb-0" >02</span>
      <div class="mx-4 bg-light-dark rounded-circle" style="width: 4px; height: 4px;"></div><span class="display-6 h5 mb-0" >Creative Team</span>
    </div>
    <div class="mw-3xl mb-24 mb-md-40">
      <h1 class="display-3 mb-10" >&ldquo;Alone we can do so little, together we can do so much.&rdquo;</h1><span class="h5" >Helen Keller</span>
    </div>
    <div class="row pb-40 position-relative"><img class="d-xl-none position-absolute bottom-0 start-50 translate-middle-x img-fluid" src="wrexa-assets/elements/half-circles-triple.svg" alt=""/><img class="d-none d-xl-block position-absolute top-0 start-50 translate-middle img-fluid" src="wrexa-assets/elements/half-circles-triple.svg" alt=""/>
      <div class="col-12 col-xl-4 mb-12 mb-xl-0">
        <div class="position-relative mw-md mx-auto">
          <div class="position-absolute bottom-100 start-0 mb-n3 w-100">
            <div class="col-11 mx-auto pb-5 bg-secondary-dark rounded opacity-50"></div>
          </div>
          <div class="position-relative d-sm-flex py-16 ps-4 ps-10 pe-sm-10 bg-white rounded">
            <div class="flex-shrink-0 d-flex mb-6 mb-sm-0 me-sm-8 align-items-center justify-content-center border rounded-circle" style="width: 90px; height: 90px;"><img class="img-fluid rounded-circle" style="width: 70px; height: 70px;" src="wrexa-assets/images/avatar-women1.png" alt=""/></div>
            <div class="text-start"><span class="text-secondary" >Co-Founder</span>
              <h4 class="mt-2 mb-8" >Hannah Redmond</h4><a class="btn p-0 btn-link text-success text-decoration-none" 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" >Learn More</span></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-4 mt-xl-28 mb-12 mb-xl-0">
        <div class="position-relative mw-md mx-auto">
          <div class="position-absolute bottom-100 start-0 mb-n3 w-100">
            <div class="col-11 mx-auto pb-5 bg-secondary-dark rounded opacity-50"></div>
          </div>
          <div class="position-relative d-sm-flex py-16 ps-4 ps-10 pe-sm-10 bg-white rounded">
            <div class="flex-shrink-0 d-flex mb-6 mb-sm-0 me-sm-8 align-items-center justify-content-center border rounded-circle" style="width: 90px; height: 90px;"><img class="img-fluid rounded-circle" style="width: 70px; height: 70px;" src="wrexa-assets/images/avatar-male1.png" alt=""/></div>
            <div class="text-start"><span class="text-secondary" >Co-Founder</span>
              <h4 class="mt-2 mb-8" >William Havi</h4><a class="btn p-0 btn-link text-success text-decoration-none" 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" >Learn More</span></a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12 col-xl-4">
        <div class="position-relative mw-md mx-auto">
          <div class="position-absolute bottom-100 start-0 mb-n3 w-100">
            <div class="col-11 mx-auto pb-5 bg-secondary-dark rounded opacity-50"></div>
          </div>
          <div class="position-relative d-sm-flex py-16 ps-4 ps-10 pe-sm-10 bg-white rounded">
            <div class="flex-shrink-0 d-flex mb-6 mb-sm-0 me-sm-8 align-items-center justify-content-center border rounded-circle" style="width: 90px; height: 90px;"><img class="img-fluid rounded-circle" style="width: 70px; height: 70px;" src="wrexa-assets/images/avatar-male2.png" alt=""/></div>
            <div class="text-start"><span class="text-secondary" >Design Director</span>
              <h4 class="mt-2 mb-8" >Ethan Orio O. Son</h4><a class="btn p-0 btn-link text-success text-decoration-none" 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" >Learn More</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>