Tailwind CSS Components

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative">
        <p class="mb-8 text-center text-gray-500 font-bold">Trusted by brands all around the world</p>
        <div class="bg-white border border-gray-100 rounded-3xl">
          <div class="flex flex-wrap items-stretch">
            <div class="w-full sm:w-1/3 border-b sm:border-r border-gray-100">
              <div class="py-12 lg:py-20 px-8">
                <img class="mx-auto" src="zanrly-assets/brands/brand.svg" alt="">
              </div>
            </div>
            <div class="w-full sm:w-1/3 border-b sm:border-r border-gray-100">
              <div class="py-12 lg:py-20 px-8">
                <img class="mx-auto" src="zanrly-assets/brands/brand3.svg" alt="">
              </div>
            </div>
            <div class="w-full sm:w-1/3 border-b border-gray-100">
              <div class="py-12 lg:py-20 px-8">
                <img class="mx-auto" src="zanrly-assets/brands/brand4.svg" alt="">

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap lg:items-center -m-8">
          <div class="w-full md:w-1/2 p-8">
            <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/testimonials/woman.png" alt="">
          </div>
          <div class="w-full md:w-1/2 p-8">
            <p class="mb-10 text-2xl text-gray-500 font-bold">"Had some issues where my site crashed and broke, reached out to Shuffle Editor to see if they could help me fix it. Even though we are 12 hours apart in time, they were quick to reply and helpful/willing to do what is needed to fix the issue."</p>
            <h3 class="font-heading text-2xl text-gray-100 font-black">Monica</h3>
            <p class="text-sm text-gray-700 font-bold">@monicajohnson</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-100 overflow-hidden border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap lg:items-center -m-8">
          <div class="w-full md:w-1/2 p-8">
            <img class="mx-auto md:ml-0 rounded-3xl" src="zanrly-assets/images/testimonials/woman.png" alt="">
          </div>
          <div class="w-full md:w-1/2 p-8">
            <p class="mb-10 text-2xl font-bold">"Had some issues where my site crashed and broke, reached out to Shuffle Editor to see if they could help me fix it. Even though we are 12 hours apart in time, they were quick to reply and helpful/willing to do what is needed to fix the issue."</p>
            <h3 class="font-heading text-2xl text-gray-900 font-black">Monica</h3>
            <p class="text-sm text-gray-500 font-bold">@monicajohnson</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pb-24 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-gray-900 rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="#1F2937"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="#111827"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="#1F2937"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="#111827"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
    </div>
    <div class="md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-white font-black tracking-tight">Join for free</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpDarkReverseInput2-1">Full Name</label>
            <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-900 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signUpDarkReverseInput2-1" type="text" placeholder="First and last name">
          </div>

<section class="pb-32 md:pb-64 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-gray-800 rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="#111827"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="#1F2937"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="#111827"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="#1F2937"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
    </div>
    <div class="md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-white font-black tracking-tight">Welcome Back</h2>
        <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <label class="block mb-2 text-sm text-gray-400 font-bold" for="signInDarkInput2-1">Email Address</label>
            <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-800 placeholder-gray-500 outline-none border border-gray-700 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInDarkInput2-1" type="email" placeholder="Enter email address">
          </div>

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 overflow-hidden bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="mb-10 max-w-7xl mx-auto">
        <h2 class="font-heading max-w-2xl mx-auto text-center text-4xl md:text-5xl text-white font-black tracking-tight">Manage all from anywhere</h2>
      </div>
      <div class="flex flex-nowrap justify-center items-center -m-8 mb-0">
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone2.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone3.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone2.png" alt="">
        </div>
      </div>
      <p class="mb-8 max-w-lg mx-auto text-gray-500 font-bold text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus sagittis nulla duis non at sed eget. Tincidunt eget tempor nunc eget</p>

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <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-md">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">How it works</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">All-in-one, next-gen SaaS experience</h2>
          <p class="mb-5 text-gray-500 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Learn more</a></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="py-16 px-8 bg-gray-900 border border-gray-800 rounded-3xl">
          <div class="max-w-md mx-auto">
            <div class="flex flex-wrap -m-3">
              <div class="w-full p-3">
                <div class="flex flex-wrap -m-4">
                  <div class="flex flex-col items-center w-auto p-4">
                    <div class="flex items-center justify-center mb-6 w-16 h-16 text-xl text-gray-900 font-black bg-gray-800 rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 md:px-16 bg-gray-800 overflow-hidden rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-dark-light w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark-light.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-10 text-4xl text-gray-100 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <div class="flex flex-wrap -m-2.5">
              <div class="w-full p-2.5">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <div class="flex items-center justify-center w-12 h-12 bg-gray-900 rounded-xl">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                        <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6876 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0978C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="py-32 px-8 h-full rounded-3xl" style="background-image: url('zanrly-assets/images/newsletter/newsletter.png'); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="relative py-32 px-8 text-center h-full bg-gray-900 overflow-hidden rounded-3xl">
          <img class="absolute w-full bottom-0 left-0" src="zanrly-assets/images/newsletter/pattern-net-dark.svg" alt="">
          <div class="relative z-10 max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Applications</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-white font-black tracking-tight">Subscribe and receive updates</h2>
            <div class="max-w-sm mx-auto">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:flex-1 p-2">
                  <input class="px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterDarkReversePatternInput2-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-2">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Sign In</a></div>
                  </div>
                </div>
              </div>
            </div>

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="mb-12 max-w-lg mx-auto text-center">
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Grow fast, with us</h2>
          <p class="text-gray-600 font-bold">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
        </div>
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/2 p-4">
            <div class="py-14 px-8 text-center h-full bg-gray-900 rounded-3xl">
              <div class="md:max-w-xs mx-auto">
                <h2 class="font-heading mb-6 text-5xl md:text-6xl lg:text-7xl text-gray-900 font-black tracking-tight">
                  <span class="text-transparent bg-clip-text bg-gradient-green-dark">98%</span>
                </h2>
                <h3 class="font-heading mb-3.5 text-xl text-gray-100 font-bold">Average Satisfaction Rate</h3>
                <p class="text-gray-700 font-bold">Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="py-14 px-8 text-center h-full bg-gray-900 rounded-3xl">
              <div class="md:max-w-xs mx-auto">
                <h2 class="font-heading mb-6 text-5xl md:text-6xl lg:text-7xl text-gray-900 font-black tracking-tight">

<section class="relative pb-24 bg-white overflow-hidden">
  <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
    <div class="absolute bg-gradient-radial-white w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-gray.png" alt="">
  </div>
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-gray-100 rounded-b-3xl">
      <svg class="absolute top-0 -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-424)" fill="white"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 24C24 10.7452 13.2548 0 0 0H24H91H501H568H592C578.745 0 568 10.7452 568 24V162C568 175.255 557.255 186 544 186H48C34.7452 186 24 175.255 24 162V24Z" fill="#F3F4F6"></path>
      </svg>
      <svg class="absolute top-0 -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-992)" fill="white"></rect>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M-544 24C-544 10.7452 -554.745 0 -568 0H-544H-477H-67H0H24C10.7452 0 0 10.7452 0 24V162C0 175.255 -10.7452 186 -24 186H-520C-533.255 186 -544 175.255 -544 162V24Z" fill="#F3F4F6"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
    </div>
    <div class="relative md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Join for free</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      </div>
      <form>
        <div class="flex flex-wrap -m-3">

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 overflow-hidden bg-white border border-gray-100 rounded-3xl">
      <div class="mb-10 max-w-7xl mx-auto">
        <h2 class="font-heading max-w-2xl mx-auto text-center text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Manage all from anywhere</h2>
      </div>
      <div class="flex flex-nowrap justify-center items-center -m-8 mb-0">
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone2.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone3.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone.png" alt="">
        </div>
        <div class="flex-shrink-0 p-8">
          <img src="zanrly-assets/images/applications/iphone2.png" alt="">
        </div>
      </div>
      <p class="mb-8 max-w-lg mx-auto text-gray-500 font-bold text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus sagittis nulla duis non at sed eget. Tincidunt eget tempor nunc eget</p>

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 overflow-hidden border border-gray-800 rounded-3xl" style="background-image: url('zanrly-assets/images/faq/pattern-dark2.svg'); background-position: bottom; background-repeat: no-repeat;">
      <div class="md:max-w-7xl mx-auto">
        <div class="md:max-w-xl mb-10">
          <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
          <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Got questions? We’re here to help!</h2>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-gray-800 rounded-3xl">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h3 class="font-heading text-xl text-white font-black">Is it really unlimited downloads?</h3>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="p-10 bg-gray-800 rounded-3xl">
              <div class="flex flex-wrap -m-2">

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/faq/pattern-gray2.svg'); background-position: bottom; background-repeat: no-repeat;">
      <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="zanrly-assets/images/faq/pattern-gray2.svg" alt="">
      <div class="relative z-10 md:max-w-7xl mx-auto">
        <div class="md:max-w-xl mb-10">
          <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
          <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Got questions? We’re here to help!</h2>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-gray-100 rounded-3xl">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h3 class="font-heading text-xl text-gray-900 font-black">Is it really unlimited downloads?</h3>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="p-10 bg-gray-100 rounded-3xl">

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-100 overflow-hidden rounded-3xl" style="background-image: url('zanrly-assets/images/faq/pattern-white2.svg'); background-position: bottom; background-repeat: no-repeat;">
      <div class="md:max-w-7xl mx-auto">
        <div class="md:max-w-xl mb-10">
          <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Frequently asked questions</span>
          <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Got questions? We’re here to help!</h2>
        </div>
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="p-10 bg-white rounded-3xl">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:w-1/2 p-2">
                  <h3 class="font-heading text-xl text-gray-900 font-black">Is it really unlimited downloads?</h3>
                </div>
                <div class="w-full md:w-1/2 p-2">
                  <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum vitae vel purus.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="p-10 bg-white rounded-3xl">
              <div class="flex flex-wrap -m-2">

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-gray-800 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">Feature</span>
            <h2 class="font-heading mb-10 text-4xl text-gray-100 font-black tracking-tight">
              <span>Let’s track your business</span>
              <span class="text-blue-500">easily!</span>
            </h2>
            <div class="flex flex-wrap -m-2.5">
              <div class="w-full p-2.5">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <div class="flex items-center justify-center w-12 h-12 bg-gray-900 rounded-xl">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>
                        <path d="M22 16C22 19.31 19.31 22 16 22C15.2555 22 14.5393 21.8643 13.8811 21.6141C13.5624 21.4929 13.503 21.0851 13.7248 20.8262C14.8668 19.4938 15.5 17.786 15.5 16C15.5 15.66 15.47 15.32 15.42 15C15.3902 14.8155 15.4844 14.6342 15.6478 14.5437C16.9719 13.8107 18.0532 12.6876 18.727 11.3153C18.8609 11.0427 19.1968 10.923 19.4452 11.0978C20.9863 12.1818 22 13.9755 22 16Z" fill="#3B82F6"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="flex-1 p-3">

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="py-32 px-8 h-full rounded-3xl" style="background-image: url('zanrly-assets/images/newsletter/newsletter.png'); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
      </div>
      <div class="w-full md:w-1/2 p-4">
        <div class="relative py-32 px-8 text-center h-full bg-white overflow-hidden rounded-3xl">
          <img class="absolute w-full bottom-0 left-0" src="zanrly-assets/images/newsletter/pattern-net-gray.svg" alt="">
          <div class="relative z-10 max-w-md mx-auto">
            <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Applications</span>
            <h2 class="font-heading mb-8 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Subscribe and receive updates</h2>
            <div class="max-w-sm mx-auto">
              <div class="flex flex-wrap -m-2">
                <div class="w-full md:flex-1 p-2">
                  <input class="px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterLightReversePatternInput2-1" type="text" placeholder="Email address">
                </div>
                <div class="w-full md:w-auto p-2">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Sign In</a></div>
                  </div>
                </div>
              </div>
            </div>

<section class="pb-24 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative mb-16 py-16 px-8 max-w-xl mx-auto bg-white border border-gray-100 rounded-b-3xl">
      <svg class="absolute -top-px -left-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-425)" fill="white"></rect>
        <mask id="path-1-inside-1_954_4665" fill="white">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M23 24C23 10.7452 12.2548 0 -1 0H23H90H500H567H591C577.745 0 567 10.7452 567 24V162C567 175.255 556.255 186 543 186H47C33.7452 186 23 175.255 23 162V24Z"></path>
        </mask>
        <path d="M-1 1C11.7025 1 22 11.2975 22 24H24C24 10.1929 12.8071 -1 -1 -1V1ZM23 -1H-1V1H23V-1ZM90 -1H23V1H90V-1ZM500 -1H90V1H500V-1ZM567 -1H500V1H567V-1ZM591 -1H567V1H591V-1ZM568 24C568 11.2975 578.297 1 591 1V-1C577.193 -1 566 10.1929 566 24H568ZM568 162V24H566V162H568ZM543 187C556.807 187 568 175.807 568 162H566C566 174.703 555.703 185 543 185V187ZM47 187H543V185H47V187ZM22 162C22 175.807 33.1929 187 47 187V185C34.2974 185 24 174.703 24 162H22ZM22 24V162H24V24H22Z" fill="#F3F4F6" mask="url(#path-1-inside-1_954_4665)"></path>
      </svg>
      <svg class="absolute -top-px -right-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect width="1440" height="992" transform="translate(-991)" fill="white"></rect>
        <mask id="path-1-inside-1_954_4665" fill="white">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M-543 24C-543 10.7452 -553.745 0 -567 0H-543H-476H-66H1H25C11.7452 0 1 10.7452 1 24V162C1 175.255 -9.74518 186 -23 186H-519C-532.255 186 -543 175.255 -543 162V24Z"></path>
        </mask>
        <path d="M-567 1C-554.297 1 -544 11.2975 -544 24H-542C-542 10.1929 -553.193 -1 -567 -1V1ZM-543 -1H-567V1H-543V-1ZM-476 -1H-543V1H-476V-1ZM-66 -1H-476V1H-66V-1ZM1 -1H-66V1H1V-1ZM25 -1H1V1H25V-1ZM2 24C2 11.2975 12.2975 1 25 1V-1C11.1929 -1 0 10.1929 0 24H2ZM2 162V24H0V162H2ZM-23 187C-9.19287 187 2 175.807 2 162H0C0 174.703 -10.2975 185 -23 185V187ZM-519 187H-23V185H-519V187ZM-544 162C-544 175.807 -532.807 187 -519 187V185C-531.703 185 -542 174.703 -542 162H-544ZM-544 24V162H-542V24H-544Z" fill="#F3F4F6" mask="url(#path-1-inside-1_954_4665)"></path>
      </svg>
      <img class="mx-auto" src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
    </div>
    <div class="md:max-w-md mx-auto">
      <div class="mb-10 text-center">
        <h2 class="font-heading mb-4 text-4xl md:text-5xl text-black font-black tracking-tight">Join for free</h2>
        <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, to the con adipiscing. Volutpat tempor to the condim entum.</p>
      </div>

<section class="py-16 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <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-md">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">How it works</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-900 font-black tracking-tight">All-in-one, next-gen SaaS experience</h2>
          <p class="mb-5 text-gray-700 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Learn more</a></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="py-16 px-8 border border-gray-100 rounded-3xl">
          <div class="max-w-md mx-auto">
            <div class="flex flex-wrap -m-3">
              <div class="w-full p-3">
                <div class="flex flex-wrap -m-4">
                  <div class="flex flex-col items-center w-auto p-4">
                    <div class="flex items-center justify-center mb-6 w-16 h-16 text-xl text-gray-900 font-black bg-gray-100 rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>

<section class="py-16 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <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-md">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">How it works</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl text-gray-100 font-black tracking-tight">All-in-one, next-gen SaaS experience</h2>
          <p class="mb-5 text-gray-500 font-bold">Yearly access to all products with ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-auto p-2"><a class="block w-full px-4 py-2.5 text-sm text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Learn more</a></div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="py-16 px-8 bg-gray-900 rounded-3xl">
          <div class="max-w-md mx-auto">
            <div class="flex flex-wrap -m-3">
              <div class="w-full p-3">
                <div class="flex flex-wrap -m-4">
                  <div class="flex flex-col items-center w-auto p-4">
                    <div class="flex items-center justify-center mb-6 w-16 h-16 text-xl text-gray-900 font-black bg-gray-800 rounded-full">
                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14 16C14 17.77 13.23 19.37 12 20.46C10.94 21.42 9.54 22 8 22C4.69 22 2 19.31 2 16C2 13.9753 3.01397 12.1814 4.5554 11.0973C4.80358 10.9228 5.1393 11.0422 5.27324 11.3145C6.21715 13.2332 7.95419 14.6699 10.02 15.23C10.65 15.41 11.31 15.5 12 15.5C12.4872 15.5 12.9539 15.4538 13.4074 15.3687C13.6958 15.3147 13.9828 15.4995 13.9955 15.7926C13.9985 15.8621 14 15.9314 14 16Z" fill="#3B82F6"></path>
                        <path d="M18 8C18 8.78 17.85 9.53 17.58 10.21C16.89 11.95 15.41 13.29 13.58 13.79C13.08 13.93 12.55 14 12 14C11.45 14 10.92 13.93 10.42 13.79C8.59 13.29 7.11 11.95 6.42 10.21C6.15 9.53 6 8.78 6 8C6 4.69 8.69 2 12 2C15.31 2 18 4.69 18 8Z" fill="#3B82F6"></path>