Content Components in Wrexa library

<section class="pt-40 bg-white">
  <div class="md:ml-10 bg-gray-900 relative">
    <img class="hidden 2xl:block max-w-xs 3xl:max-w-sm absolute top-0 left-0 z-10" src="wrexa-assets/images/work-office.png" alt="">
    <img class="hidden md:block absolute top-1/2 right-0" src="wrexa-assets/images/women-photo2.png" alt="">
    <div class="container px-4 mx-auto relative">
      <div class="hidden sm:block absolute top-0 left-0 bottom-0 h-full ml-12 lg:ml-40 xl:ml-64 3xl:ml-80 w-px bg-gray-600"></div>
      <img class="max-w-xs absolute top-0 right-0 -mt-40 mr-8" src="wrexa-assets/images/women-photo1.png" alt="">
      <div>
        <div class="sm:pb-40 pt-64 md:pt-52 max-w-md mx-auto">
          <h1 class="font-heading text-5xl sm:text-6xl text-white mb-10">What you need, when you need it</h1>
          <p class="font-light text-gray-500 mb-16">The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
          <div class="pl-8 xl:pl-16 mb-24">
            <div class="flex items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
              <span class="ml-8 text-white">One platform for you</span>
            </div>
            <div class="flex items-center mb-4">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
              <span class="ml-8 text-white">Integrations</span>
            </div>
            <div class="flex items-center">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle><circle cx="14" cy="14" r="2" fill="#95A8FF"></circle></svg>
              <span class="ml-8 text-white">Workflow builder</span>
            </div>
          </div>
          <a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Discover Now</a>
        </div>
        <img class="block mx-auto mt-24 mb-6 2xl:hidden" src="wrexa-assets/images/work-office.png" alt="">
        <img class="block md:hidden ml-auto" src="wrexa-assets/images/women-photo2.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="position-relative pt-24 pt-xxl-64 bg-light overflow-hidden">
  <div class="position-relative ms-2 ms-md-10 bg-dark-light"><img class="d-none d-xl-block position-absolute top-0 start-0 img-fluid" style="z-index: 1;" src="wrexa-assets/images/work-office.png" alt=""/><img class="d-none d-xxl-block position-absolute top-50 end-0 img-fluid translate-middle-y" src="wrexa-assets/images/women-photo2.png" alt=""/><img class="d-none d-md-block d-xxl-none position-absolute bottom-0 end-0 img-fluid" src="wrexa-assets/images/women-photo2.png" alt=""/>
    <div class="position-relative container"><img class="d-none d-xxl-block position-absolute top-0 end-0 mt-xl-n24 mt-xxl-n64 img-fluid" src="wrexa-assets/images/women-photo1.png" alt=""/><img class="d-none d-md-block d-xxl-none position-absolute top-0 end-0 mt-n32 img-fluid" style="max-width: 200px;" src="wrexa-assets/images/women-photo1.png" alt=""/>
      <div class="row ms-1 ms-md-6">
        <div class="d-xl-none d-block col-12 col-xl-4 h-100 border-start"><img class="d-block mx-auto img-fluid" src="wrexa-assets/images/work-office.png" alt=""/></div>
        <div class="col-12 col-xl-7 col-xxl-9 ms-auto border-start">
          <div class="mw-lg pt-24 pt-xl-52 pb-24 mx-auto">
            <h1 class="display-3 text-white mb-10" >What you need, when you need it</h1>
            <p class="text-secondary mb-14 lh-lg" >The pond cras ornare, some chords for a three moments, like a sense of truth that comes from within.</p>
            <div class="ps-md-12 mb-24">
              <div class="d-flex mb-3 align-items-center">
                <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                  <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle>
                </svg><span class="ms-8 h6 text-white mb-0" >One platform for you</span>
              </div>
              <div class="d-flex mb-3 align-items-center">
                <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                  <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle>
                </svg><span class="ms-8 h6 text-white mb-0" >Integrations</span>
              </div>
              <div class="d-flex align-items-center">
                <svg width="28" height="28" viewbox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                  <circle cx="14" cy="14" r="2" fill="#95A8FF"></circle>
                </svg><span class="ms-8 h6 text-white mb-0" >Workflow builder</span>
              </div>
            </div><a class="btn btn-primary" href="#" >Discover Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>