Tailwind CSS Application Components

<section class="relative pt-20 md:pt-28 md:pb-28 overflow-hidden">
  <div class="relative">
    <img class="hidden lg:block absolute top-1/2 right-0 max-w-lg xl:max-w-none xl:h-200 transform -translate-y-1/2" src="saturn-assets/images/applications/group-app-light.png" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="max-w-xl mx-auto lg:mx-0">
        <div class="max-w-lg mb-2">
          <span class="inline-block py-1 px-3 mb-5 text-xs font-semibold text-orange-900 bg-orange-50 rounded-full">👋 MEET SATURN UI LIBRARY</span>
          <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold mb-5">
            <span>Manage your</span>
            <span class="font-serif italic">products</span>
            <span>with saturn</span>
          </h1>
          <p class="text-xl text-gray-500 font-semibold">Nisi eu pellentesque felis volutpat aliquet pulvinar sed. Vitae fames vestibulum urna vel odio mauris urna orci est.</p>
          <img class="block ml-auto -mt-4 -mr-8" src="saturn-assets/images/applications/arrow-left.png" alt="">
        </div>
        <div class="sm:flex items-center mb-8">
          <input class="w-full mb-3 sm:mb-0 sm:mr-4 py-4 px-6 text-gray-500 placeholder-gray-400 border border-gray-200 rounded-full focus:border-purple-500 focus:outline-purple" type="email" placeholder="Enter email address">
          <button class="relative group sm:flex-shrink-0 inline-block w-full sm:w-auto py-4 px-6 text-center text-orange-50 bg-orange-900 font-semibold rounded-full overflow-hidden" type="submit">
            <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
            <span class="relative">Start 14-days trial</span>
          </button>
        </div>
        <div class="flex flex-wrap items-center -mx-4">
          <div class="w-full md:w-1/3 px-4 mb-6 md:mb-0">
            <div class="flex items-center">
              <img src="saturn-assets/images/applications/avatar-photo1.png" alt="">
              <img class="-ml-3" src="saturn-assets/images/applications/avatar-photo2.png" alt="">
              <img class="-ml-3" src="saturn-assets/images/applications/avatar-photo3.png" alt="">
            </div>
          </div>
          <div class="w-full md:w-1/3 px-4 mb-6 md:mb-0">
            <div>
              <span class="block text-2xl font-bold text-gray-900">500+</span>
              <span class="text-sm text-gray-400">Happy Customers</span>
            </div>
          </div>
          <div class="w-full md:w-1/3 px-4">
            <div>
              <span class="block text-2xl font-bold text-gray-900">5.0/5</span>
              <div class="flex items-center">
                <div class="flex items-center mr-2">
                  <img class="mr-1" src="saturn-assets/images/applications/star.svg" alt="">
                  <img class="mr-1" src="saturn-assets/images/applications/star.svg" alt="">
                  <img class="mr-1" src="saturn-assets/images/applications/star.svg" alt="">
                  <img class="mr-1" src="saturn-assets/images/applications/star.svg" alt="">
                  <img src="saturn-assets/images/applications/star.svg" alt="">
                </div>
                <span class="text-sm text-gray-400">Review</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img class="block w-full pl-8 mt-20 ml-auto lg:hidden" src="saturn-assets/images/applications/app-full-image.png" alt="">
  </div>
</section>

<section class="relative pt-24 pb-28 bg-white overflow-hidden">
  <img class="absolute right-0 bottom-0" src="flaro-assets/images/applications/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-2xl">
          <p class="mb-7 text-sm text-indigo-600 font-semibold uppercase">👋 Meet new Flaro</p>
          <h2 class="mb-8 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Start with ease, Grow your business</h2>
          <p class="mb-10 text-lg text-gray-600 font-medium leading-normal md:max-w-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <a class="mb-20 inline-block" href="#">
            <img class="h-12" src="flaro-assets/images/applications/app-store-round.png" alt="">
          </a>
          <h3 class="mb-3 text-gray-900 font-bold font-heading">Trusted by 1M+ customers</h3>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <div class="flex flex-wrap -m-0.5">
                <div class="w-auto p-0.5">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></path>
                  </svg>
                </div>
                <div class="w-auto p-0.5">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></path>
                  </svg>
                </div>
                <div class="w-auto p-0.5">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></path>
                  </svg>
                </div>
                <div class="w-auto p-0.5">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></path>
                  </svg>
                </div>
                <div class="w-auto p-0.5">
                  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M7.707 1.21267C8.02812 0.224357 9.42632 0.224357 9.74744 1.21267L10.8948 4.74387C11.0384 5.18586 11.4503 5.48511 11.915 5.48511H15.6279C16.6671 5.48511 17.0992 6.81488 16.2585 7.42569L13.2547 9.60809C12.8787 9.88126 12.7214 10.3654 12.865 10.8074L14.0123 14.3386C14.3335 15.327 13.2023 16.1488 12.3616 15.538L9.35775 13.3556C8.98178 13.0824 8.47266 13.0824 8.09669 13.3556L5.09287 15.538C4.25216 16.1488 3.12099 15.327 3.44211 14.3386L4.58947 10.8074C4.73308 10.3654 4.57575 9.88126 4.19978 9.60809L1.19596 7.42569C0.355248 6.81488 0.787317 5.48511 1.82649 5.48511H5.53942C6.00415 5.48511 6.41603 5.18586 6.55964 4.74387L7.707 1.21267Z" fill="#6366F1"></path>
                  </svg>
                </div>
              </div>
            </div>
            <div class="w-auto p-1">
              <div class="flex flex-wrap -m-0.5">
                <div class="w-auto p-0.5">
                  <p class="text-gray-900 font-bold">4.2/5</p>
                </div>
                <div class="w-auto p-0.5">
                  <p class="text-gray-600 font-medium">(45k Reviews)</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8 self-end">
        <img class="relative top-28 transform hover:scale-105 transition ease-in-out duration-1000" src="flaro-assets/images/applications/iphone.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="pt-36 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-xl">
          <h2 class="mb-6 font-heading font-bold text-6xl sm:text-7xl text-gray-900" >Get our mobile app to make the process faster.</h2>
          <p class="mb-16 text-gray-600 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
          <div class="flex flex-wrap -m-2.5 pb-10 xl:pb-0">
            <div class="w-auto p-2.5"><a href="#"><img src="gradia-assets/logos/brands/app-store2.png" alt=""></a></div>
            <div class="w-auto p-2.5"><a href="#"><img src="gradia-assets/logos/brands/play-store2.png" alt=""></a></div>
          </div>
        </div>
      </div>
      <div class="flex w-full md:w-1/2 p-6"><img class="self-end mx-auto" src="gradia-assets/images/applications/mobile.png" alt=""></div>
    </div>
  </div>
</section>

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 md:pb-16 lg:pt-40 lg:pb-44 bg-gray-900 border border-gray-800 rounded-3xl" style="background-image: url('zanrly-assets/images/applications/pattern-net2-dark.svg'); background-size: cover; background-position: center; background-repeat: no-repeat;">
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center -m-8">
          <div class="w-full md:w-1/2 p-8 mb-16 md:mb-0">
            <div class="md:max-w-xl">
              <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Applications</span>
              <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Start with ease, Grow your business</h2>
              <p class="mb-6 text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
              <a class="inline-block" href="#">
                <img src="zanrly-assets/images/applications/app-store.svg" alt="">
              </a>
            </div>
          </div>
        </div>
      </div>
      <img class="md:absolute md:bottom-0 md:right-0 xl:right-28 md:w-1/2 lg:w-auto mx-auto md:mr-0" src="zanrly-assets/images/applications/smartphone.png" alt="">
    </div>
  </div>
</section>

<section class="relative py-16 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <img class="hidden md:block absolute top-32 -left-96" src="nightsable-assets/images/application-section/lines.png" alt="">
        <img class="relative mx-auto" src="nightsable-assets/images/application-section/phone.png" alt="">
        <img class="hidden md:block absolute bottom-56 left-64" src="nightsable-assets/images/application-section/star.png" alt="">
      </div>
      <div class="w-full md:w-1/2 p-8">
        <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h2 class="font-heading mb-6 text-7xl text-white tracking-8xl md:max-w-sm">Get a Nightsable App</h2>
        <p class="mb-6 text-white text-opacity-60 md:max-w-xs">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        <div class="flex flex-wrap -m-2.5">
          <div class="w-auto p-2.5">
            <a href="#">
              <img src="nightsable-assets/images/application-section/app-store.png" alt="">
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a href="#">
              <img src="nightsable-assets/images/application-section/google-play.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-20">
  <img class="hidden md:block absolute top-0 left-0 mt-24" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <div class="relative container px-4 mx-auto text-center">
    <div class="max-w-2xl mx-auto mb-16">
      <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
      <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-10 text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="flex justify-center items-center mb-24">
        <a class="mr-4" href="#">
          <img src="zeus-assets/buttons/app-store.svg" alt="">
        </a>
        <a href="#">
          <img src="zeus-assets/buttons/google-play.svg" alt="">
        </a>
      </div>
    </div>
    <div>
      <img class="mx-auto" src="zeus-assets/images/devices/3-devices.svg" alt="">
    </div>
  </div>
</section>

<section class="relative pt-20 2xl:pt-40">
  <div class="container px-4 mx-auto mb-16 md:mb-24">
    <div class="text-center">
      <a class="inline-block mb-8 text-2xl font-bold" href="#">
        <img class="h-7" src="zospace-assets/logos/zospace-dark-logo.svg" alt="" width="auto">
      </a>
      <h2 class="mb-8 text-6xl 2xl:text-7xl font-bold font-heading">Collaborate everywhere.</h2>
      <p class="mb-16 text-xl">Get our free mobile application.</p>
      <a class="inline-block px-12 py-5 bg-blue-500 hover:bg-blue-600 rounded-full text-lg font-bold text-white transition duration-200" href="#">Downolad</a>
    </div>
  </div>
  <div class="relative">
    <div class="hidden lg:block absolute right-0 top-0 mt-24 w-1/2 h-px bg-gray-50"></div>
    <div class="hidden lg:block absolute left-0 top-0 mt-40 w-1/2 h-px bg-gray-50"></div>
    <img class="lg:relative lg:max-w-4xl mx-auto" src="zospace-assets/images/smartphone.png" alt="">
  </div>
</section>

<section class="pt-24 md:pt-40 bg-orange-900 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24">
      <span class="font-heading text-xl">06</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Download App</span>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 pb-24 lg:pb-52">
        <div class="max-w-md lg:max-w-none mx-auto">
          <h1 class="font-heading text-4xl sm:text-6xl lg:text-7xl mb-20">Online Configurator</h1>
          <div class="flex flex-wrap -mx-4 mb-16">
            <div class="w-full lg:w-1/2 px-4 mb-12 lg:mb-0">
              <div class="flex max-w-xs">
                <div class="mr-6 text-indigo-500">
                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.9999 3.33301C19.5579 3.33301 19.134 3.5086 18.8214 3.82116C18.5088 4.13372 18.3333 4.55765 18.3333 4.99967V8.33301C18.3333 8.77504 18.5088 9.19896 18.8214 9.51152C19.134 9.82408 19.5579 9.99967 19.9999 9.99967C20.4419 9.99967 20.8659 9.82408 21.1784 9.51152C21.491 9.19896 21.6666 8.77504 21.6666 8.33301V4.99967C21.6666 4.55765 21.491 4.13372 21.1784 3.82116C20.8659 3.5086 20.4419 3.33301 19.9999 3.33301ZM34.9999 18.333H31.6666C31.2246 18.333 30.8006 18.5086 30.4881 18.8212C30.1755 19.1337 29.9999 19.5576 29.9999 19.9997C29.9999 20.4417 30.1755 20.8656 30.4881 21.1782C30.8006 21.4907 31.2246 21.6663 31.6666 21.6663H34.9999C35.4419 21.6663 35.8659 21.4907 36.1784 21.1782C36.491 20.8656 36.6666 20.4417 36.6666 19.9997C36.6666 19.5576 36.491 19.1337 36.1784 18.8212C35.8659 18.5086 35.4419 18.333 34.9999 18.333ZM9.99992 19.9997C9.99992 19.5576 9.82432 19.1337 9.51176 18.8212C9.1992 18.5086 8.77528 18.333 8.33325 18.333H4.99992C4.55789 18.333 4.13397 18.5086 3.82141 18.8212C3.50885 19.1337 3.33325 19.5576 3.33325 19.9997C3.33325 20.4417 3.50885 20.8656 3.82141 21.1782C4.13397 21.4907 4.55789 21.6663 4.99992 21.6663H8.33325C8.77528 21.6663 9.1992 21.4907 9.51176 21.1782C9.82432 20.8656 9.99992 20.4417 9.99992 19.9997ZM10.3666 8.33301C10.0417 8.0258 9.60807 7.86023 9.16111 7.87274C8.71415 7.88524 8.29046 8.07478 7.98325 8.39967C7.67604 8.72457 7.51048 9.15819 7.52298 9.60515C7.53548 10.0521 7.72503 10.4758 8.04992 10.783L10.4499 13.0997C10.611 13.2552 10.8017 13.3767 11.0108 13.4568C11.2198 13.537 11.4428 13.5743 11.6666 13.5663C11.8911 13.5655 12.1131 13.5193 12.3193 13.4305C12.5255 13.3417 12.7117 13.2122 12.8666 13.0497C13.177 12.7374 13.3512 12.315 13.3512 11.8747C13.3512 11.4344 13.177 11.0119 12.8666 10.6997L10.3666 8.33301ZM28.3333 13.5663C28.7624 13.5646 29.1743 13.3975 29.4833 13.0997L31.8833 10.783C32.176 10.4771 32.3414 10.0712 32.3458 9.64779C32.3501 9.22437 32.1931 8.81517 31.9067 8.50329C31.6203 8.19141 31.2259 8.00025 30.8037 7.96862C30.3814 7.93699 29.9629 8.06728 29.6333 8.33301L27.2333 10.6997C26.9228 11.0119 26.7486 11.4344 26.7486 11.8747C26.7486 12.315 26.9228 12.7374 27.2333 13.0497C27.5218 13.3542 27.9146 13.5387 28.3333 13.5663ZM19.9999 29.9997C19.5579 29.9997 19.134 30.1753 18.8214 30.4878C18.5088 30.8004 18.3333 31.2243 18.3333 31.6663V34.9997C18.3333 35.4417 18.5088 35.8656 18.8214 36.1782C19.134 36.4907 19.5579 36.6663 19.9999 36.6663C20.4419 36.6663 20.8659 36.4907 21.1784 36.1782C21.491 35.8656 21.6666 35.4417 21.6666 34.9997V31.6663C21.6666 31.2243 21.491 30.8004 21.1784 30.4878C20.8659 30.1753 20.4419 29.9997 19.9999 29.9997ZM29.5499 26.8997C29.2317 26.5925 28.8044 26.4243 28.3621 26.4321C27.9199 26.4399 27.4988 26.6231 27.1916 26.9413C26.8844 27.2596 26.7162 27.6869 26.724 28.1291C26.7318 28.5714 26.915 28.9925 27.2333 29.2997L29.6333 31.6663C29.9422 31.9641 30.3541 32.1313 30.7833 32.133C31.0066 32.1343 31.2279 32.0907 31.434 32.0048C31.6402 31.9189 31.8269 31.7925 31.9833 31.633C32.1395 31.4781 32.2635 31.2937 32.3481 31.0906C32.4327 30.8875 32.4762 30.6697 32.4762 30.4497C32.4762 30.2297 32.4327 30.0118 32.3481 29.8087C32.2635 29.6056 32.1395 29.4213 31.9833 29.2663L29.5499 26.8997ZM10.4499 26.8997L8.04992 29.2163C7.8937 29.3713 7.76971 29.5556 7.6851 29.7587C7.60049 29.9618 7.55692 30.1797 7.55692 30.3997C7.55692 30.6197 7.60049 30.8375 7.6851 31.0406C7.76971 31.2437 7.8937 31.4281 8.04992 31.583C8.20624 31.7425 8.39302 31.8689 8.59916 31.9548C8.8053 32.0407 9.0266 32.0843 9.24992 32.083C9.66078 32.0865 10.0584 31.9381 10.3666 31.6663L12.7666 29.3497C13.0848 29.0425 13.268 28.6214 13.2758 28.1791C13.2837 27.7369 13.1155 27.3096 12.8083 26.9913C12.501 26.6731 12.08 26.4899 11.6377 26.4821C11.1954 26.4743 10.7682 26.6425 10.4499 26.9497V26.8997Z" fill="currentColor"></path>
                  </svg>
                </div>
                <div>
                  <h4 class="text-xl sm:text-2xl mb-6">Flexibility</h4>
                  <p class="font-light">The house by the pond cras ornare, some chords for a three moments, like a sense of truth that.</p>
                </div>
              </div>
            </div>
            <div class="w-full lg:w-1/2 px-4">
              <div class="flex max-w-xs">
                <div class="mr-6 text-indigo-500">
                  <svg width="40" height="34" viewBox="0 0 22 34" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="14" y="0.75" width="3.5" height="7" rx="1.75" transform="rotate(90 14 0.75)" fill="currentColor"></rect><rect x="18" y="8" width="3" height="15" rx="1.5" transform="rotate(90 18 8)" fill="currentColor"></rect><rect x="22" y="15.25" width="3" height="15" rx="1.5" transform="rotate(90 22 15.25)" fill="currentColor"></rect><rect x="15" y="22.5" width="3" height="15" rx="1.5" transform="rotate(90 15 22.5)" fill="currentColor"></rect><rect x="16" y="30" width="3.5" height="9" rx="1.75" transform="rotate(90 16 30)" fill="currentColor"></rect></svg>
                </div>
                <div>
                  <h4 class="text-xl sm:text-2xl mb-6">Organize</h4>
                  <p class="font-light">Really, like a sense of truth that comes from within. The final game.</p>
                </div>
              </div>
            </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="#">Download Application</a>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 flex items-end">
        <img class="block max-w-sm xl:max-w-lg mx-auto lg:mr-0" src="wrexa-assets/images/application-right.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-white" style="background-image: url('flex-ui-assets/elements/pattern-white.svg'); background-position: center;">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium rounded-full shadow-sm">Application</span>
      <h3 class="mb-10 mx-auto text-3xl md:text-4xl leading-tight text-coolGray-900 font-bold tracking-tighter max-w-5xl">Great work starts with your app</h3>
      <div class="relative mb-10 mx-auto max-w-max">
        <img class="absolute top-1/2 transform -translate-y-1/2 w-1/2 md:w-auto text-yellow-400" src="flex-ui-assets/elements/circle1-yellow.svg" alt="">
        <img class="absolute top-1/2 right-0 transform -translate-y-1/2 w-1/4 md:w-auto text-blue-500" src="flex-ui-assets/elements/dots1-blue.svg" alt="">
        <img class="absolute p-7 -mt-1 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10/12 z-20" src="flex-ui-assets/elements/dashboard.png" alt="">
        <img class="relative z-10" src="flex-ui-assets/elements/applications/macbook.png" alt="">
      </div>
      <p class="mb-6 mx-auto text-lg md:text-xl text-coolGray-500 font-medium max-w-4xl">Our philosophy is simple &mdash; hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="flex flex-wrap justify-center">
        <div class="w-full md:w-auto py-1 md:py-0 md:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 border border-green-500 rounded-md shadow-sm" href="#">Learn More</a></div>
        <div class="w-full md:w-auto py-1 md:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 focus:ring-2 focus:ring-coolGray-200 focus:ring-opacity-50 border border-coolGray-200 rounded-md shadow-sm" href="#">About Us</a></div>
      </div>
    </div>
  </div>
</section>

<section class="relative bg-blueGray-100 pt-24 2xl:pt-44 md:pb-24 lg:pb-64 overflow-hidden">
  <img class="hidden md:block absolute bottom-0 right-0 w-1/2 md:w-full" src="uinel-assets/images/applications/frame.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="w-full md:w-1/2">
      <img class="block mb-16" src="uinel-assets/images/applications/icon.svg" alt="">
      <span class="text-sm text-gray-300 uppercase">Download application</span>
      <h2 class="mt-8 mb-16 text-9xl md:text-10xl xl:text-11xl font-heading font-medium leading-tight">
        <span>Download</span>
        <span class="relative">
          <span class="relative z-10">app</span>
          <img class="absolute top-1/2 left-0 xl:-left-5 transform -translate-y-1/2 xl:mt-2 xl:max-w-max" src="uinel-assets/images/applications/line-circle.svg" alt="">
        </span>
        <span>wherever you are.</span>
      </h2>
      <a class="inline-block py-5 px-10 w-full md:w-auto text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Download now</a>
      <img class="md:hidden" src="uinel-assets/images/applications/frame2.png" alt="">
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <span class="inline-flex mb-6 h-6 items-center justify-center text-xs font-extrabold px-2 text-indigo-900 rounded border-2 border-indigo-900 bg-green-200 uppercase shadow-sm">Application</span>
      <h1 class="text-3xl md:text-4xl font-extrabold font-heading">Great work starts with your app</h1>
    </div>
    <img class="block mx-auto mb-12" src="nigodo-assets/apps/laptop-full.svg" alt="">
    <div class="max-w-3xl mx-auto text-center">
      <p class="text-xl font-extrabold leading-7 mb-6">Our philosophy is simple — hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
      <div class="flex flex-wrap items-center justify-center"><a class="inline-block w-full md:w-auto py-4 px-6 mb-4 md:mb-0 md:mr-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Request a demo</a><a class="inline-block w-full md:w-auto py-4 px-6 text-center leading-6 text-lg text-indigo-900 hover:text-white font-extrabold bg-white hover:bg-indigo-800 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">About Us</a></div>
    </div>
  </div>
</section>

<section>
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-green-600" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="pt-20 bg-green-600 overflow-hidden radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="relative max-w-md mx-auto text-center">
        <a class="mb-8 inline-block px-5 py-5 bg-white rounded-lg" href="#">
          <img class="h-12" src="atis-assets/logo/atis/atis-mono-sign.svg" alt="">
        </a>
        <p class="text-gray-50 font-bold">Dolor sit amet consectutar</p>
        <h2 class="text-4xl lg:text-5xl text-white font-bold">Build &amp; Launch without problems</h2>
        <div class="h-80 mt-10">
          <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-80 z-10" src="atis-assets/illustrations/book-detail.png" alt="">
          <img class="absolute bottom-0 left-0 h-80 -ml-16 -mb-20" src="atis-assets/illustrations/details.png" alt="">
          <img class="absolute bottom-0 right-0 h-80 -mr-16 -mb-20" src="atis-assets/illustrations/login.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 items-center">
      <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0">
        <div class="max-w-md mx-auto md:mx-0">
          <h2 class="text-5xl md:text-6xl font-heading mb-6" >Build and launch without problems</h2>
          <p class="mb-6 leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
          
          <div class="flex"><a class="inline-block mr-4" href="#"><img src="pstls-assets/images/applications/appstore.svg" alt="" ></a><a class="inline-block" href="#"><img src="pstls-assets/images/applications/googleplay.svg" alt="" ></a></div>
        </div>
      </div>
      
      <div class="w-full md:w-1/2 px-4"><img class="w-full max-w-md mx-auto" src="pstls-assets/images/applications/phone-light-squares.png" alt="" ></div>
    </div>
  </div>
</section>

<section class="pt-24 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative z-10 max-w-xl mx-auto text-center">
      <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
      <h2 class="mt-6 mb-6 text-2xl text-white uppercase font-heading">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-10 text-lg text-gray-500">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="flex flex-wrap items-center justify-center mb-20">
        <a class="inline-flex w-full md:w-auto mb-6 md:mb-0 md:mr-8 items-center justify-center py-4 px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
          <svg class="mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="black"></path>
          </svg>
          <span class="text-sm font-heading">Activate demo</span>
        </a>
        <a class="inline-flex items-center text-white hover:underline" href="#">
          <span class="mr-2 text-sm font-heading">Share with friends</span>
          <svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.01 3.95383H0V6.04614H12.01V9.1846L16 4.99998L12.01 0.815369V3.95383Z" fill="#FFEC3E"></path>
          </svg>
        </a>
      </div>
    </div>
    <div class="relative flex">
      <div class="absolute top-0 left-0 -ml-64 -mt-80 inline-block">
        <img class="w-full h-full object-contain" src="boldui-assets/elements/shadow-left-blue.svg" alt="">
      </div>
      <div class="absolute top-0 right-0 -mr-64 -mt-80 inline-block">
        <img class="w-full h-full object-contain" src="boldui-assets/elements/shadow-right.svg" alt="">
      </div>
    </div>
    <div class="relative max-w-4xl mx-auto">
      <img src="boldui-assets/images/laptop-center.png" alt="">
    </div>
  </div>
</section>

<section class="pt-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-md md:max-w-3xl mx-auto mb-16 text-center">
      <span class="text-sm font-semibold uppercase">
        <span>Develop your</span>
        <span class="text-green-500">skills</span>
      </span>
      <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">See what this extension tool looks like</h2>
      <p class="max-w-xl mx-auto text-lg leading-8 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
      <div class="flex items-center justify-center">
        <a class="inline-block mr-4" href="#">
          <img class="h-14 w-36" src="acros-assets/buttons/app-store.svg" alt="">
        </a>
        <a class="inline-block" href="#">
          <img class="h-14 w-36" src="acros-assets/buttons/google-play.svg" alt="">
        </a>
      </div>
    </div>
    <img class="block mx-auto" src="acros-assets/images/applications/three-mobile.png" alt="">
  </div>
</section>

<section class="pt-24 bg-blue-800">
  <div class="container px-4 mx-auto text-center">
    <div class="max-w-2xl mx-auto">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">New feature</span>
      <h2 class="mt-4 mb-6 text-4xl font-bold font-heading text-white">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-8 text-lg text-gray-50">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="flex flex-wrap justify-center items-center mb-16"><a class="w-full md:w-auto px-8 py-5 mb-2 md:mb-0 mr-4 text-sm leading-normal text-blue-800 font-bold uppercase bg-yellow-500 hover:bg-yellow-400 transition duration-200 border-2 border-transparent" href="#">Get started free</a><a class="w-full md:w-auto px-8 py-5 mr-4 text-sm leading-normal text-white hover:text-blue-100 font-bold uppercase border-2 border-white" href="#">Request Demo</a></div>
      <div>
        <img class="mx-auto" src="bendis-assets/images/computer.png" alt="">
      </div>
    </div>
  </div>
</section>

<section class="pt-20">
  <div class="relative container px-4 mx-auto text-center">
    <div class="max-w-2xl mx-auto mb-16">
      <span class="text-sm font-bold text-gray-200 uppercase">Lorem ipsum</span>
      <h2 class="mt-2 mb-4 text-4xl lg:text-5xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-8 text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="flex justify-center items-center mb-16">
        <a class="mr-4" href="#">
          <img src="mockup-assets/images/buttons/app-store.svg" alt="">
        </a>
        <a href="#">
          <img src="mockup-assets/images/buttons/google-play.svg" alt="">
        </a>
      </div>
    </div>
    <div>
      <img class="mx-auto" src="mockup-assets/images/devices/3-devices.svg" alt="">
    </div>
  </div>
</section>

<section class="pt-20">
    <div class="container mx-auto px-4">
        <div class="flex justify-center mb-6">
            <div class="bg-yellow-100 py-1 px-2 text-xs font-bold inline-block">New feature</div>
        </div>
        <h1 class="font-heading text-center text-4xl lg:text-5xl font-bold max-w-2xl lg:max-w-5xl mx-auto mb-4">Take quick action that increases your brand's regular profit.</h1>
        <p class="text-gray-600 text-center max-w-xl mx-auto mb-6">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
        <div class="flex flex-wrap justify-center gap-4 mb-16">
            <a class="inline-block" href="#">
                <img src="cronos-assets/buttons/app-store.svg" alt="">
            </a>
            <a class="inline-block" href="#">
                <img src="cronos-assets/buttons/google-play.svg" alt="">
            </a>
        </div>
        <div class="max-w-xl mx-auto">
            <img class="w-full" src="cronos-assets/images/phone-half-three.png" alt="">
        </div>
    </div>
</section>

<section class="relative pt-8 pb-16 md:py-16 lg:py-24 bg-yellow-300  overflow-hidden">
        <div class="relative container px-4 mx-auto text-center">
            <div class="max-w-lg lg:max-w-4xl mx-auto mb-16 lg:mb-24">
                <span class="inline-block px-4 py-2 bg-pink-500 text-white font-bold text-sm tracking-wider uppercase">Lorem ipsum</span>
                <h2 class="mt-8 mb-6 text-4xl sm:text-6xl lg:text-7xl xl:text-7xl font-black font-heading leading-[0.9] mb-8 tracking-tight text-black uppercase">Lorem ipsum dolor sit amet <span class="text-pink-500">consectutar</span> domor at elis</h2>
                <p class="mb-12 text-xl lg:text-2xl leading-relaxed text-black font-medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
                <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
                    <a class="inline-block" href="#">
                        <div class="inline-block px-6 py-4 bg-pink-500 hover:bg-white text-white hover:text-black font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]">
                            APP STORE
                        </div>
                    </a>
                    <a href="#">
                        <div class="inline-block px-6 py-4 bg-white hover:bg-pink-500 text-black hover:text-white font-black font-heading text-xl border-4 border-black transition-all hover:translate-x-2 hover:translate-y-2 shadow-[8px_8px_0px_0px_#000000] hover:shadow-[6px_6px_0px_0px_#000000]">
                            GOOGLE PLAY
                        </div>
                    </a>
                </div>
            </div>
            <div class="px-5">
                <div class="relative w-full max-w-3xl mx-auto">
                    <div class="absolute inset-0 bg-pink-500 translate-x-6 translate-y-6 border-4 border-black">
                    </div>
                    <div class="relative pt-6 px-6 border-4 border-black bg-white">
                        <img class="block w-full mx-auto" src="neub-assets/images/devices/3-devices.svg" alt="">
                    </div>
                    <div class="absolute -bottom-3 -right-3 w-24 h-24 bg-yellow-300 border-4 border-black"></div>
                    <div class="absolute -top-4 -left-4 w-16 h-16 bg-pink-500 border-4 border-black"></div>
                </div>
            </div>
        </div>
    </section>

<section class="py-20 relative">
  <div class="absolute inset-0 bg-gradient-to-br from-black via-gray-950 to-black"></div>
  <div class="absolute inset-0 opacity-20">
    <div class="absolute top-20 left-1/4 w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
    <div class="absolute top-40 right-1/3 w-1 h-1 bg-green-400 rounded-full animate-pulse delay-75"></div>
    <div class="absolute bottom-40 left-1/3 w-3 h-3 bg-purple-500 rounded-full animate-pulse delay-150"></div>
    <div class="absolute bottom-20 right-1/4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-300"></div>
  </div>
  
  <div class="container px-4 mx-auto text-center relative z-10">
    <div class="max-w-lg lg:max-w-2xl mx-auto text-center mb-16">
        <div class="relative">
            <h2 class="mb-4 text-3xl leading-tight md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight font-black font-heading tracking-wider bg-gradient-to-r from-blue-400 via-purple-500 to-green-400 bg-clip-text text-transparent">DOWNLOAD NEURAL INTERFACE</h2>
            <div class="absolute -top-2 -left-2 w-full h-full border-2 border-blue-400 opacity-20 transform rotate-1 z-n1 z-n1"></div>
        </div>
        <p class="mb-8 text-base leading-relaxed lg:text-xl lg:leading-relaxed text-gray-400">Access quantum protocols through our mobile neural interface. Connect to the grid anywhere, anytime. Initialize advanced cybernetic operations from your portable device.</p>
        <div class="flex justify-center items-center gap-4">
            <a class="group relative px-6 py-3 bg-gradient-to-r from-blue-400 to-purple-500 hover:from-purple-500 hover:to-blue-400 transform hover:scale-105 transition-all duration-300 overflow-hidden" href="#" style="clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 10px 100%);">
                <span class="relative z-10 text-gray-950 font-semibold text-sm tracking-wider">APP STORE</span>
                <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-0 group-hover:opacity-20 transform -skew-x-12 group-hover:translate-x-full transition-all duration-700"></div>
            </a>
            <a class="group relative px-6 py-3 border-2 border-green-400 text-green-400 hover:bg-green-400 hover:text-gray-950 transform hover:scale-105 transition-all duration-300 overflow-hidden" href="#" style="clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);">
                <span class="relative z-10 font-semibold text-sm tracking-wider">GOOGLE PLAY</span>
                <div class="absolute inset-0 bg-green-400 transform translate-x-full group-hover:translate-x-0 transition-transform duration-300"></div>
            </a>
        </div>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="relative p-8 border border-blue-400 border-opacity-30 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 bg-opacity-10 rounded-lg transform hover:scale-105 transition-all duration-300">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-400 via-purple-500 to-green-400 opacity-10 rounded-lg"></div>
        <div class="absolute top-4 right-4 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        <div class="absolute bottom-4 left-4 w-1 h-1 bg-blue-400 rounded-full animate-pulse delay-75"></div>
        <div class="absolute top-4 left-4 w-1 h-1 bg-purple-500 rounded-full animate-pulse delay-150"></div>
        <div class="relative z-10 p-8 bg-gray-950 bg-opacity-80 rounded border border-cyan-400 border-opacity-20">
          <img class="mx-auto opacity-60 filter brightness-125 contrast-125 w-full object-cover" src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wzMzIzMzB8MHwxfHNlYXJjaHw2fHxoYWNrZXJ8ZW58MHx8fHwxNzQ4MDk4NjQxfDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080&amp;w=450" alt="">
        </div>
      </div>
    </div>
  </div>
</section>