Tailwind CSS Components

<section class="pt-16 lg:pb-32 relative">
  <img class="hidden lg:block absolute top-0 left-0 w-1/2 h-full object-cover" src="wrexa-assets/images/mom-and-son-big-picture.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 ml-auto">
      <div class="lg:pl-10 max-w-lg lg:max-w-2xl mx-auto">
        <div class="flex flex-col sm:flex-row mb-6 items-end sm:items-center justify-end">
          <span class="sm:mr-4 text-sm text-gray-800 font-light">I already have an account</span>
          <a class="inline-flex items-center font-medium text-green-900 hover:text-green-800" href="#">
            <span class="mr-2">Sign in</span>
            <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>
          </a>
        </div>
        <a class="flex mb-8 items-center text-gray-800 hover:text-gray-700" href="#">
          <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.10529 11L7.18516 10.0272L2.92291 6.1875L14 6.1875L14 4.8125L2.92291 4.8125L7.18516 0.972813L6.10529 -6.90178e-07L4.80825e-07 5.5L6.10529 11Z" fill="currentColor"></path>
          </svg>
          <span class="ml-6">Back home</span>
        </a>
        <h2 class="font-heading text-4xl sm:text-5xl mb-8">Let’s level up your design, together</h2>
        <p class="font-light mb-16">The house like a sense of truth that comes from within.</p>
        <form action="#" method="post">
          <div class="relative mb-6">

<section x-data="{ mobileNavOpen: false }">
  <div class="bg-gray-900">
    <nav class="mr-12 py-8 px-8 bg-gray-200 overflow-hidden">
      <div class="flex w-full items-center">
        <a class="inline-block 3xl:mr-52 self-center" href="#">
          <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="auto">
        </a>
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="3xl:hidden flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-white hover:bg-gray-100">
          <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
        </button>
        <ul class="hidden 3xl:flex mr-auto items-center">
          <li class="mr-14">
            <a class="inline-flex items-center text-sm text-gray-900 hover:text-gray-700" href="#">
              <span class="mr-4">Collection</span>
              <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 2L6 6L2 2" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
              </svg>
            </a>
          </li>
          <li class="mr-14"><a class="inline-block text-sm text-gray-900 hover:text-gray-700" href="#">Projects</a></li>
          <li><a class="inline-block text-sm text-gray-900 hover:text-gray-700" href="#">About</a></li>
        </ul>
        <div class="hidden 3xl:block relative pl-16 mr-32">
          <div class="absolute top-0 left-0 h-32 -mt-20 w-px bg-gray-400"></div>

<section class="py-24 md:py-40 bg-orange-800" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-20">
      <span class="font-heading text-xl">04</span>
      <div class="mx-4 rounded-full bg-white h-1 w-1"></div>
      <span class="font-heading text-xl">FAQs</span>
    </div>
    <div class="flex flex-wrap items-center justify-center mb-20">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-4">
        <svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 18L1 10L9 2" stroke="#232126" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
        </svg>
      </button>
        <div class="w-full md:w-5/6 xl:w-2/3 mx-auto text-center order-first md:order-none mb-20 md:mb-0">
            <div class="overflow-hidden">
              <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="max-w-max mx-auto border-b border-white mb-20">
                      <h4 class="text-center font-heading text-3xl sm:text-4xl">01. Can i change my plan?</h4>
                    </div>
                    <p class="font-heading leading-relaxed text-3xl sm:text-4xl md:text-5xl" style="line-height: 1.5">
                      <span>Yees, u can try us for free for 60 days. We’ll provide u with a free, personalized</span>
                      <span class="border-b-2 border-black">40-minute onboarding</span>
                      <span>call to get you up and running as soon as possible.</span>

<section class="relative bg-gray-100 overflow-hidden">
  <div class="pt-40 sm:pt-64 pb-52 sm:pb-64 bg-gray-100">
    <div class="absolute top-0 left-0 w-full">
      <div class="h-8 mx-10 bg-white"></div>
    </div>
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 3xl:w-1/4 px-4 mb-20 3xl:mb-0">
          <div class="max-w-xs mx-auto px-10">
            <div class="flex w-26 h-26 mb-12 items-center justify-center rounded-full bg-white">
              <span class="font-heading text-3xl">96%</span>
            </div>
            <h4 class="font-heading text-2xl mb-6">Projects is good</h4>
            <p class="font-light mb-14">Really, like a sense of truth that comes from within. The final game.</p>
            <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>
          </div>
        </div>
        <div class="w-full md:w-1/2 3xl:w-1/4 px-4 mb-20 3xl:mb-0">
          <div class="max-w-xs mx-auto px-10">

<section class="relative pt-64 pb-40 bg-white overflow-hidden">
  <div class="absolute top-0 left-1/2">
    <div class="w-px h-16 bg-gray-900"></div>
    <div class="w-px h-24 bg-gray-200"></div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-18">
      <span class="font-heading text-xl">08</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Customer review</span>
    </div>
    <div class="max-w-4xl mx-auto text-center mb-32">
      <h2 class="font-heading text-5xl sm:text-6xl">Don’t take our word for it. Trust our stats</h2>
    </div>
    <div class="flex justify-center mb-24">
      <div class="hidden md:block w-full md:w-auto mr-8 flex-shrink-0">
        <div class="max-w-md mx-auto px-8 pt-12 pb-20 h-full border border-gray-200 rounded">
          <div class="flex mb-10 items-center justify-between">
            <div class="flex items-center">
              <div class="flex-shrink-0 relative max-w-max mr-4">
                <img class="w-12 h-12 rounded-full object-cover" src="wrexa-assets/images/avatar-women1.png" alt="">
                <img class="absolute bottom-0 right-0 -mb-1 -mr-1" src="wrexa-assets/elements/miro-logo-small-icon.svg" alt="">
              </div>
              <span class="text-lg">@saidy</span>

<section class="py-24 md:py-40 bg-gray-100" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="relative">
      <div class="absolute top-0 left-0 -mt-2 w-full">
        <div class="mx-5 h-8 bg-gray-200 rounded-t-lg"></div>
      </div>
      <div class="relative pt-16 pb-12 px-12 rounded-2xl bg-white">
        <div class="flex flex-wrap mb-8 items-center justify-between">
          <div class="flex w-full sm:w-auto items-center mb-6 sm:mb-0">
            <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">Teamwork spaces</span>
          </div>
          <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="">All</option>
              <option value="1">Old</option>
            </select>
          </div>
        </div>
        <div class="overflow-x-auto px-4 mb-12">
          <table class="table-auto w-full min-w-max">
            <thead>
              <tr>

<section class="pt-32 pb-40 bg-gray-900" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-12">
      <span class="font-heading text-xl text-white">05</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl text-white">Pricing</span>
    </div>
    <div class="text-center mb-40">
      <h1 class="font-heading text-5xl sm:text-6xl lg:text-7xl text-white mb-7">Choose the plan</h1>
      <div class="flex items-center justify-center mb-16 text-white">
        <span class="text-xl mr-5">Get startet now!</span>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
        </svg>
      </div>
      <div class="inline-flex p-2 items-center border border-gray-800 rounded-full">
        <button :class="{'text-blueGray-500 hover:text-blueGray-300 sm:px-10': pricing != $refs.pricing1.textContent, 'bg-gray-800 py-2 sm:px-8 shadow text-white': pricing == $refs.pricing1.textContent}" class="inline-flex items-center px-4 bg-gray-800 py-2 sm:px-8 shadow text-white rounded-full" x-on:click="pricing = $refs.pricing1.textContent">
          <div :class="{'hidden': pricing != $refs.pricing1.textContent}">
              <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17" cy="17" r="15.75" fill="none" stroke="#DDDEE1" stroke-width="2.5"></circle>
                  <path d="M22.8897 14.1751L21.825 13.1105C21.7901 13.0755 21.7487 13.0477 21.703 13.0287C21.6574 13.0098 21.6084 13 21.559 13C21.5095 13 21.4605 13.0098 21.4149 13.0287C21.3692 13.0477 21.3278 13.0755 21.2929 13.1105L15.8495 18.8567L12.7294 15.7354C12.6579 15.6639 12.5609 15.6238 12.4598 15.6238C12.3586 15.6238 12.2617 15.6639 12.1901 15.7354L11.1115 16.8148C11.04 16.8863 10.9999 16.9833 10.9999 17.0844C10.9999 17.1855 11.04 17.2825 11.1115 17.354L15.5491 21.8943C15.5901 21.9345 15.6398 21.9645 15.6944 21.9821C15.7491 21.9997 15.807 22.0043 15.8637 21.9956C15.9221 22.0057 15.9821 22.0018 16.0387 21.9842C16.0953 21.9666 16.1469 21.9358 16.1892 21.8943L22.8897 14.7076C22.9603 14.637 23 14.5412 23 14.4413C23 14.3415 22.9603 14.2457 22.8897 14.1751V14.1751Z" fill="#D6D7DA"></path>
                  <defs><rect width="12" height="9" fill="white" transform="translate(11 13)"></rect></defs>
              </svg>
          </div>

<section class="py-24 md:py-40">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-20">
      <span class="font-heading text-xl">04</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Helpdesk / FAQs</span>
    </div>
    <div class="max-w-6xl mx-auto mb-24">
      <button x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="w-full text-left mb-10 pb-6 border-b border-gray-200">
        <div class="flex justify-between">
          <h4 class="font-heading text-2xl sm:text-3xl">Can I change my plan?</h4>
          <div class="flex-shrink-0">
            <svg :class="{ 'hidden': accordion }" class="flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                <path d="M26.6344 18.6471H21.5375V13.3658C21.5375 12.6096 20.925 11.9971 20.1687 11.9971C19.4125 11.9971 18.8 12.6096 18.8 13.3658V18.6471H13.3625C12.6125 18.6471 12 19.2596 12 20.0158C12 20.7721 12.6125 21.3846 13.3687 21.3846H18.8063V26.6346C18.8063 27.3908 19.4188 28.0033 20.175 28.0033C20.9313 28.0033 21.5437 27.3908 21.5437 26.6346V21.3846H26.6406C27.3969 21.3846 28.0094 20.7721 28.0094 20.0158C28 19.2596 27.3906 18.6471 26.6344 18.6471Z" fill="#C7C9CF"></path>
                <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
              </svg>
              <svg :class="{ 'hidden': !accordion }" class="hidden flex-shrink-0" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="20" cy="20" r="18.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                  <path d="M26.6344 18.647H21.5375H20.0683C19.0459 18.647 20.1541 18.6475 19.3978 18.6475C18.6416 18.6475 18.0664 18.6478 18.8063 18.647L18.8 18.647H13.3625C12.6125 18.647 12 19.2595 12 20.0158C12 20.772 12.6125 21.3846 13.3687 21.3846H18.8063L18.5 20.5005C18.5 21.2567 18.05 21.3846 18.8063 21.3846C19.5625 21.3846 18.5 21.3846 17 21.3846H21.5437H26.6406C27.3969 21.3846 28.0094 20.772 28.0094 20.0158C28 19.2595 27.3906 18.647 26.6344 18.647Z" fill="#C7C9CF"></path>
                  <defs><rect width="16" height="16" fill="white" transform="translate(12 12)"></rect></defs>
              </svg>
          </div>
        </div>

<section class="py-24 md:py-40 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-10">
      <span class="font-heading text-xl text-white">05</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl text-white">Be unique with features</span>
    </div>
    <h1 class="text-center font-heading text-5xl sm:text-6xl md:text-7xl text-white mb-24">Features</h1>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 pb-20 lg:pb-0 mb-16 lg:mb-0 relative">
        <div class="hidden lg:block absolute top-0 right-0 pt-14 h-full w-px">
          <div class="h-full w-px bg-gray-800"></div>
        </div>
        <div class="lg:hidden absolute bottom-0 left-0 w-full h-px bg-gray-800"></div>
        <div class="max-w-sm mx-auto text-center">
          <span class="inline-block text-indigo-500">
            <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.9999 0.333008C16.5579 0.333008 16.134 0.508602 15.8214 0.821163C15.5088 1.13372 15.3333 1.55765 15.3333 1.99967V5.33301C15.3333 5.77504 15.5088 6.19896 15.8214 6.51152C16.134 6.82408 16.5579 6.99967 16.9999 6.99967C17.4419 6.99967 17.8659 6.82408 18.1784 6.51152C18.491 6.19896 18.6666 5.77504 18.6666 5.33301V1.99967C18.6666 1.55765 18.491 1.13372 18.1784 0.821163C17.8659 0.508602 17.4419 0.333008 16.9999 0.333008ZM31.9999 15.333H28.6666C28.2246 15.333 27.8006 15.5086 27.4881 15.8212C27.1755 16.1337 26.9999 16.5576 26.9999 16.9997C26.9999 17.4417 27.1755 17.8656 27.4881 18.1782C27.8006 18.4907 28.2246 18.6663 28.6666 18.6663H31.9999C32.4419 18.6663 32.8659 18.4907 33.1784 18.1782C33.491 17.8656 33.6666 17.4417 33.6666 16.9997C33.6666 16.5576 33.491 16.1337 33.1784 15.8212C32.8659 15.5086 32.4419 15.333 31.9999 15.333ZM6.99992 16.9997C6.99992 16.5576 6.82432 16.1337 6.51176 15.8212C6.1992 15.5086 5.77528 15.333 5.33325 15.333H1.99992C1.55789 15.333 1.13397 15.5086 0.821407 15.8212C0.508847 16.1337 0.333252 16.5576 0.333252 16.9997C0.333252 17.4417 0.508847 17.8656 0.821407 18.1782C1.13397 18.4907 1.55789 18.6663 1.99992 18.6663H5.33325C5.77528 18.6663 6.1992 18.4907 6.51176 18.1782C6.82432 17.8656 6.99992 17.4417 6.99992 16.9997ZM7.36659 5.33301C7.0417 5.0258 6.60807 4.86023 6.16111 4.87274C5.71415 4.88524 5.29046 5.07478 4.98325 5.39967C4.67604 5.72457 4.51048 6.15819 4.52298 6.60515C4.53548 7.05211 4.72503 7.4758 5.04992 7.78301L7.44992 10.0997C7.61098 10.2552 7.80172 10.3767 8.01075 10.4568C8.21979 10.537 8.44284 10.5743 8.66659 10.5663C8.89109 10.5655 9.11311 10.5193 9.31932 10.4305C9.52553 10.3417 9.71168 10.2122 9.86659 10.0497C10.177 9.7374 10.3512 9.31498 10.3512 8.87467C10.3512 8.43437 10.177 8.01195 9.86659 7.69968L7.36659 5.33301ZM25.3333 10.5663C25.7624 10.5646 26.1743 10.3975 26.4833 10.0997L28.8833 7.78301C29.176 7.47709 29.3414 7.07121 29.3458 6.64779C29.3501 6.22437 29.1931 5.81517 28.9067 5.50329C28.6203 5.19141 28.2259 5.00025 27.8037 4.96862C27.3814 4.93699 26.9629 5.06728 26.6333 5.33301L24.2333 7.69968C23.9228 8.01195 23.7486 8.43437 23.7486 8.87467C23.7486 9.31498 23.9228 9.7374 24.2333 10.0497C24.5218 10.3542 24.9146 10.5387 25.3333 10.5663ZM16.9999 26.9997C16.5579 26.9997 16.134 27.1753 15.8214 27.4878C15.5088 27.8004 15.3333 28.2243 15.3333 28.6663V31.9997C15.3333 32.4417 15.5088 32.8656 15.8214 33.1782C16.134 33.4907 16.5579 33.6663 16.9999 33.6663C17.4419 33.6663 17.8659 33.4907 18.1784 33.1782C18.491 32.8656 18.6666 32.4417 18.6666 31.9997V28.6663C18.6666 28.2243 18.491 27.8004 18.1784 27.4878C17.8659 27.1753 17.4419 26.9997 16.9999 26.9997ZM26.5499 23.8997C26.2317 23.5925 25.8044 23.4243 25.3621 23.4321C24.9199 23.4399 24.4988 23.6231 24.1916 23.9413C23.8844 24.2596 23.7162 24.6869 23.724 25.1291C23.7318 25.5714 23.915 25.9925 24.2333 26.2997L26.6333 28.6663C26.9422 28.9641 27.3541 29.1313 27.7833 29.133C28.0066 29.1343 28.2279 29.0907 28.434 29.0048C28.6402 28.9189 28.8269 28.7925 28.9833 28.633C29.1395 28.4781 29.2635 28.2937 29.3481 28.0906C29.4327 27.8875 29.4762 27.6697 29.4762 27.4497C29.4762 27.2297 29.4327 27.0118 29.3481 26.8087C29.2635 26.6056 29.1395 26.4213 28.9833 26.2663L26.5499 23.8997ZM7.44992 23.8997L5.04992 26.2163C4.8937 26.3713 4.76971 26.5556 4.6851 26.7587C4.60049 26.9618 4.55692 27.1797 4.55692 27.3997C4.55692 27.6197 4.60049 27.8375 4.6851 28.0406C4.76971 28.2437 4.8937 28.4281 5.04992 28.583C5.20624 28.7425 5.39302 28.8689 5.59916 28.9548C5.8053 29.0407 6.0266 29.0843 6.24992 29.083C6.66078 29.0865 7.05845 28.9381 7.36659 28.6663L9.76659 26.3497C10.0848 26.0425 10.268 25.6214 10.2758 25.1791C10.2837 24.7369 10.1155 24.3096 9.80825 23.9913C9.50104 23.6731 9.07999 23.4899 8.63771 23.4821C8.19544 23.4743 7.76818 23.6425 7.44992 23.9497V23.8997Z" fill="currentColor"></path>
            </svg>
          </span>
          <div class="mt-8">
            <h5 class="font-heading text-xl text-white mb-16">Create design and furniture</h5>
            <div class="max-w-xs px-10 mx-auto">
              <p class="font-light text-gray-500">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that.</p>

<section class="relative pb-24 bg-gray-900">
  <div class="relative pt-24">
    <div class="hidden lg:block absolute top-0 right-0 w-1/2 pt-24 xl:pt-14">
      <img class="block ml-auto max-h-192" src="wrexa-assets/images/widget-placeholder-right.png" alt="">
    </div>
    <div class="container px-4 mx-auto">
      <div class="flex items-center mb-24 sm:mb-40">
        <span class="font-heading text-xl text-white">01</span>
        <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
        <span class="font-heading text-xl text-white">Introduction</span>
      </div>
      <div class="max-w-md 3xl:max-w-2xl mx-auto lg:mx-0 xl:ml-24">
        <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl text-white mb-14">I’m happy my home found me</h1>
        <p class="max-w-sm font-light text-white mb-16 sm:mb-32">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game.</p>
        <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="#">Learn More</a>
      </div>
    </div>
    <div class="lg:hidden mt-24">
      <img class="block ml-auto max-h-192" src="wrexa-assets/images/widget-placeholder-right.png" alt="">
    </div>
  </div>
  <div class="container px-4 mx-auto mt-24 lg:mt-52">
    <div class="sm:flex"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0 text-white hover:text-gray-200" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0 text-white hover:text-gray-200" href="#">Select plan</a><a class="inline-block w-full sm:w-auto text-white hover:text-gray-200" href="#">Start a conversation</a></div>
  </div>

<div class="fixed left-0 right-0 bottom-0 z-50" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="py-9 md:px-24 bg-gray-900">
    <div class="px-4 mx-auto">
      <div class="pt-10 pb-6 px-8 md:px-12 xl:px-24 bg-gray-800 rounded-2xl">
        <div class="flex flex-wrap items-end justify-between pb-6 border-b border-gray-700">
          <div class="w-full 2xl:w-7/12 mb-8 2xl:mb-0">
            <h3 class="font-heading text-3xl text-white mb-2">Cookies on this site</h3>
            <p class="text-sm font-light text-gray-500">By clicking accept, you agree to the storing of cookies on your device to enhance site navigation. Cookies are important to the proper functioning of a site....</p>
          </div>
          <div class="w-full 2xl:w-auto ml-auto"><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto px-7 py-4 mb-4 sm:mb-0 sm:mr-5 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Accept All Cookies</a><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium border border-gray-500 hover:border-gray-400 text-white rounded" href="#">Settings</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="md:pb-52 pt-24 bg-gray-900 relative overflow-hidden">
  <div class="hidden xl:block absolute top-0 left-0 w-8 h-full bg-white"></div>
  <img class="hidden md:block absolute bottom-0 left-0 lg:ml-40" src="wrexa-assets/images/women-point-left.png" alt="">
  <img class="hidden sm:block absolute top-1/2 right-0" src="wrexa-assets/images/men-drinkin-caffe-green-background.png" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="md:ml-24 max-w-6xl mb-32">
      <h2 class="text-4xl sm:text-6xl lg:text-8xl 2xl:text-9xl text-white">
        <span class="relative">
          <span>Shh! Something</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
      </h2>
      <h2 class="text-4xl sm:text-6xl lg:text-8xl 2xl:text-9xl text-white">
        <span class="relative">
          <span>has gone</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
      </h2>
      <h2 class="text-4xl sm:text-6xl lg:text-8xl 2xl:text-9xl text-white">
        <span class="relative">
          <span>wrong.</span>
          <div class="hidden sm:block absolute bottom-0 left-0 mb-2 sm:mb-4 2xl:mb-8 h-px w-full bg-white"></div>
        </span>
      </h2>

<section class="pt-24 md:pt-40 overflow-hidden">
  <div class="container px-4 mx-auto mb-40 lg:mb-72">
    <div class="flex items-center mb-6">
      <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">Content</span>
    </div>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full xl:w-1/2 px-4 mb-8 xl:mb-0">
        <div class="max-w-lg">
          <h1 class="font-heading text-5xl sm:text-6xl">About company and our talents</h1>
        </div>
      </div>
      <div class="w-full xl:w-1/2 px-4">
        <p class="max-w-xl font-light">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game. Proin a tempor magna. Pellentesque malesuada nunc non augue fringilla some chords for.</p>
      </div>
    </div>
  </div>
  <div class="relative">
    <div class="hidden lg:block absolute top-0 left-0 ml-10 w-2/5 2xl:w-1/3 h-full bg-gray-900">
      <div class="absolute top-0 left-0 bottom-0 h-full ml-12 3xl:ml-16 w-px bg-gray-600"></div>
      <div class="py-40 md:py-64">
        <img class="absolute top-0 right-0 w-11/12 -mt-40" src="wrexa-assets/images/furniture-two-elements-photo.png" alt="">
        <h2 class="max-w-sm mx-auto pl-10 font-heading text-5xl 3xl:text-6xl text-white">What you need, when you need it</h2>

<section class="relative pt-24 pb-24 md:pb-52 bg-gray-100 overflow-hidden">
  <div class="hidden lg:block absolute top-0 right-0 mt-40 mr-20 h-full">
    <a class="inline-block" href="#">
      <img class="w-16 h-16" src="wrexa-assets/logos/logo-wrexa.svg" alt="">
    </a>
    <div class="hidden lg:block w-px mt-24 mx-auto h-full bg-gray-200"></div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-18">
      <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="lg:hidden mb-12">
      <a class="inline-block" href="#">
        <img class="w-16 h-16" src="wrexa-assets/logos/logo-wrexa.svg" alt="">
      </a>
    </div>
    <div class="max-w-3xl xl:max-w-4xl mb-24 sm:mb-44">
      <h1 class="font-heading text-4xl sm:text-5xl md:text-6xl mb-8">“Alone we can do so little, together we can do so much.”</h1>
      <p class="max-w-xl font-light">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that comes from within. The final game.</p>
    </div>
    <div class="max-w-3xl lg:max-w-4xl 2xl:max-w-5xl 3xl:max-w-7xl">
      <div class="flex flex-wrap -mx-4 -mb-16">

<section x-data="{ mobileNavOpen: false }">
  <nav class="relative px-10 py-5 bg-white shadow">
    <a class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-block w-12 h-12" href="#">
      <img src="wrexa-assets/logos/logo-wrexa.svg" alt="" width="48">
    </a>
    <div class="flex w-full">
      <button x-on:click="mobileNavOpen = !mobileNavOpen" class="3xl:hidden flex ml-auto items-center justify-center w-14 h-14 rounded-full bg-gray-100 hover:bg-gray-200">
        <svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="0.75" y1="1.25" x2="19.25" y2="1.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line><line x1="0.75" y1="8.25" x2="13.25" y2="8.25" stroke="black" stroke-width="1.5" stroke-linecap="round"></line></svg>
      </button>
      <ul class="hidden 3xl:flex mr-auto items-center">
        <li class="mr-14">
          <a class="inline-flex items-center text-sm text-gray-900 hover:text-gray-700" href="#">
            <span class="mr-4">Collection</span>
            <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 2L6 6L2 2" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round"></path>
            </svg>
          </a>
        </li>
        <li class="mr-14"><a class="inline-block text-sm text-gray-900 hover:text-gray-700" href="#">Projects</a></li>
        <li class="mr-14"><a class="inline-block text-sm text-gray-900 hover:text-gray-700" href="#">About</a></li>
        <li><a class="inline-block text-sm text-gray-900 hover:text-gray-700" href="#">How to Start</a></li>
      </ul>
      <ul class="hidden 3xl:flex mr-16 items-center">
        <li class="mr-14"><a class="inline-block text-sm text-gray-900 hover:text-gray-700" href="#">Design</a></li>

<section class="relative pt-24 pb-40 bg-orange-800">
  <img class="absolute bottom-0 left-0 w-full" src="wrexa-assets/elements/white-triple-circle-wide.svg" alt="">
  <div class="container px-4 mx-auto relative">
    <div class="sm:flex mb-32"><a class="inline-block w-full sm:w-auto sm:mr-24 md:mr-40 mb-2 sm:mb-0" href="#">Download application</a><a class="inline-block w-full sm:w-auto sm:mr-auto mb-2 sm:mb-0" href="#">Select plan</a><a class="inline-block w-full sm:w-auto" href="#">Start a conversation</a></div>
    <div class="max-w-5xl mx-auto mb-32 text-center">
      <h2 class="font-heading text-4xl md:text-5xl xl:text-6xl mb-10">Cloud backup solutions for home and business</h2>
      <p class="text-gray-800 font-light">The house like a sense of truth that comes from within. The final game.</p>
    </div>
    <div class="flex flex-wrap justify-center items-end -mx-4 -mb-16">
      <div class="w-full sm:w-auto px-4 mb-16">
        <div class="max-w-xs mx-auto px-10">
          <img class="block mx-auto mb-16" src="wrexa-assets/logos/brands/miro-clouds.svg" alt="">
          <div class="relative h-10 text-center">
            <div class="absolute top-0 right-1/2 transform translate-x-1/2 -mt-3 text-white">
              <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6.16137 1.29115C6.55567 0.684092 7.44433 0.684092 7.83863 1.29115L13.7909 10.4553C14.223 11.1206 13.7456 12 12.9523 12H1.04771C0.254427 12 -0.22302 11.1206 0.209087 10.4553L6.16137 1.29115Z" fill="currentColor"></path>
              </svg>
            </div>
            <span class="block py-1 px-4 bg-white rounded-full">Miro</span>
          </div>
        </div>
      </div>
      <div class="w-full sm:w-auto px-4 mb-16">
        <div class="max-w-xs mx-auto px-10 sm:px-0">

<section class="py-24 md:pb-40 md:pt-52 bg-gray-900 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-32">
      <div class="w-full 3xl:w-1/2 px-4 mb-16 3xl:mb-0">
        <h2 class="max-w-3xl font-heading text-4xl sm:text-6xl xl:text-7xl text-white">Enthralling global photography</h2>
      </div>
      <div class="w-full 3xl:w-1/2 px-4 3xl:text-right">
        <p class="text-white mb-4">The house like a sense of truth that comes from within.</p>
        <select class="pl-4 pr-2 py-1 bg-transparent border border-gray-500 rounded text-gray-500" name="" id="">
          <option value="" selected="">2022</option>
          <option value="">2021</option>
          <option value="">2020</option>
        </select>
      </div>
    </div>
  </div>
  <div>
    <div class="container px-4 mx-auto">
      <div>
        <div class="flex justify-start items-start mb-32">
          <div class="w-full md:flex-shrink-0 max-w-md md:mr-20">
            <a class="block text-white hover:text-gray-200" href="#">
              <img class="block w-full h-64 object-cover mb-6" src="wrexa-assets/images/phone-on-table.png" alt="">
              <div class="flex items-center">

<section class="pt-18 relative overflow-hidden">
  <div class="hidden xl:block absolute top-0 left-0 h-full w-1/2 mt-18">
    <img class="block h-full w-full object-cover" src="wrexa-assets/images/room-placeholder.png" alt="">
  </div>
  <div class="bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="w-full xl:w-1/2 pt-24 md:pt-40 xl:py-56 ml-auto">
        <div class="max-w-lg mx-auto xxl:mr-0 mb-24 xl:mb-0">
          <div>
            <h1 class="font-heading text-5xl sm:text-6xl md:text-7xl 3xl:text-8xl text-white mb-20">
              <span class="block leading-none">Turnover.</span>
              <span class="block leading-none">Even more than you expect</span>
            </h1>
            <div>
              <a class="inline-flex mb-20 items-center text-white" href="#">
                <span class="mr-4">Exploring the shift of today</span>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M14.9983 2.97487L12.8444 2.94712L12.9539 11.4487L1.76433 0.259107L0.261729 1.76171L11.4513 12.9513L2.94974 12.8418L2.97749 14.9957L15.1552 15.1525L14.9983 2.97487Z" fill="currentColor"></path>
                </svg>
              </a>
            </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="#">Get Started</a>
          </div>
        </div>

<section>
  <div class="flex flex-wrap">
    <div class="w-full xl:w-1/2 2xl:w-1/3 px-4 bg-gray-900">
      <div class="px-5 sm:px-16 pt-24 pb-32">
        <a class="inline-block mb-20" href="#">
          <img src="wrexa-assets/logos/wrexa-co-logo-name.svg" alt="">
        </a>
        <img class="block mx-auto mb-16" src="wrexa-assets/images/circle-avatars-with-logo.png" alt="">
        <div class="max-w-md mx-auto">
          <a class="flex mb-8 items-center text-white hover:text-gray-200" href="#">
            <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.10529 11L7.18516 10.0272L2.92291 6.1875L14 6.1875L14 4.8125L2.92291 4.8125L7.18516 0.972813L6.10529 -6.90178e-07L4.80825e-07 5.5L6.10529 11Z" fill="currentColor"></path>
            </svg>
            <span class="ml-6">Back home</span>
          </a>
          <h3 class="font-heading text-3xl sm:text-4xl text-white mb-8">Better together. Join our community</h3>
          <p class="text-white font-light">The house like a sense of truth that comes from within.</p>
        </div>
      </div>
    </div>
    <div class="w-full xl:w-1/2 2xl:w-2/3 px-5">
      <div class="max-w-2xl mx-auto pt-16 pb-36">
        <form action="#" method="post">
          <div>

<section class="relative pt-32 lg:pt-52 pb-24 lg:pb-64 bg-gray-100 overflow-hidden">
  <img class="absolute bottom-0 right-0 w-full lg:w-2/3" src="wrexa-assets/elements/half-circles-triple.svg" alt="">
  <div class="absolute top-0 left-0 w-full">
    <div class="h-8 mx-10 bg-white"></div>
  </div>
  <div class="container px-4 mx-auto relative">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-24 lg:mb-0">
        <div class="max-w-lg">
          <h2 class="font-heading text-5xl sm:text-6xl mb-10">The way to start your career</h2>
          <p class="max-w-xs font-light mb-18">The house like a sense of truth that comes from within. The final game.</p>
          <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="#">View all</a>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-lg mx-auto">
          <div class="flex sm:max-w-max mx-auto px-6 sm:pl-12 sm:pr-24 pt-6 pb-8 mb-4 items-center bg-white rounded-2xl">
            <img src="wrexa-assets/elements/stats-icon1.svg" alt="">
            <div class="ml-6 sm:ml-10">
              <span class="text-sm text-gray-300">Spent this month</span>
              <h4 class="font-heading text-3xl">$13,560</h4>
            </div>
          </div>
          <div class="flex sm:max-w-max px-6 sm:pl-12 sm:pr-24 pt-6 pb-8 mb-4 items-center bg-white rounded-2xl">