Tailwind CSS Components

<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">
      <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="zanrly-assets/images/newsletter/pattern-net-gray3.svg" alt="">
      <div class="relative z-10">
        <div class="mb-6 max-w-lg mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Newsletter</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Join to get exclusive contents for free.</h2>
        </div>
        <div class="md:max-w-sm mx-auto mb-10">
          <div class="flex flex-wrap -m-2">
            <div class="w-full p-2">
              <input class="px-6 py-3.5 w-full text-lg text-gray-500 text-center font-bold bg-gray-100 outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterLightReversePatternInput4-1" type="text" placeholder="Email address">
            </div>
            <div class="w-full p-2">
              <div class="flex flex-wrap justify-center -m-2">
                <div class="w-full 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>
        <div class="flex flex-wrap justify-center -m-3">
          <div class="w-auto p-3">
            <div class="flex flex-wrap">

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 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 w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative flex flex-col justify-centers">
        <a class="inline-block max-w-max mx-auto mb-10" href="#">
          <img src="zanrly-assets/logos/zanrly-logo-xl-white.svg" alt="">
        </a>
        <ul class="-m-6 mb-7 text-center">
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Products</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About Us</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Portfolio</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Contact Us</a></li>
        </ul>
        <div class="flex flex-wrap justify-center -m-1.5 mb-10">
          <div class="w-auto p-1.5">
            <a class="flex items-center justify-center w-10 h-10 bg-gray-700 rounded-full" href="#">
              <img src="zanrly-assets/images/footers/insta-dark.svg" alt="">
            </a>
          </div>

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-white 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-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="max-w-lg mb-16 mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -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">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-20">
                <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                      <div class="inline-block w-full whitespace-normal">
                        <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 font-black">Monica</h3>

<section class="py-16 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 p-4">
        <div class="flex flex-col justify-between h-full">
          <div class="flex-initial mb-10">
            <div class="md:max-w-lg">
              <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Frequently Asked Questions</h2>
              <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 class="flex-initial">
            <div class="flex flex-wrap -m-4">
              <div class="w-full p-4">
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 border border-gray-800 rounded-3xl cursor-pointer">
                  <div class="flex flex-wrap -m-2">
                    <div class="flex-1 p-2">
                      <h3 class="font-heading text-xl text-white font-black">How does Zanrly help you in problems?</h3>
                      <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                          <p class="text-gray-400 font-bold mt-3">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum.</p>
                      </div>
                    </div>
                    <div class="w-auto p-2">
                        <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="max-w-lg mb-16 mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -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">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-20">
                <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                      <div class="inline-block w-full whitespace-normal">
                        <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 font-black">Monica</h3>
                        <p class="text-sm text-gray-700 font-bold">@monicajohnson</p>
                      </div>
                      <div class="visibility-item inline-block w-full whitespace-normal">
                        <p class="mb-10 text-2xl font-bold">"Experienced a sudden website malfunction, leading me to contact Shuffle Editor for assistance. Despite a 12-hour time difference, their prompt response and eagerness to address and resolve the issue were truly commendable. Grateful for their quick and effective support."</p>

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 border border-gray-100 rounded-3xl">
      <div class="flex flex-col justify-center">
        <a class="inline-block max-w-max mx-auto mb-10" href="#">
          <img src="zanrly-assets/logos/zanrly-logo-xl.svg" alt="">
        </a>
        <ul class="-m-6 mb-7 text-center">
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Products</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">About Us</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Careers</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Portfolio</a></li>
          <li class="inline-flex p-6"><a class="inline-block text-gray-500 hover:text-gray-600 font-bold" href="#">Contact Us</a></li>
        </ul>
        <div class="flex flex-wrap justify-center -m-4 mb-12">
          <div class="w-auto p-4">
            <a class="block" href="#">
              <img src="zanrly-assets/images/insta.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-4">
            <a class="block" href="#">
              <img src="zanrly-assets/images/twitter.svg" alt="">
            </a>

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-gray-900 border border-gray-800 rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="max-w-lg mb-16 mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -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">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-20">
                <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                      <div class="inline-block w-full whitespace-normal">
                        <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 class="visibility-item inline-block w-full whitespace-normal">
                        <p class="mb-10 text-2xl text-gray-500 font-bold">"Experienced a sudden website malfunction, leading me to contact Shuffle Editor for assistance. Despite a 12-hour time difference, their prompt response and eagerness to address and resolve the issue were truly commendable. Grateful for their quick and effective support."</p>

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-white rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-sm">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">What we found</span>
            <h2 class="font-heading mb-8 text-4xl text-gray-900 font-black tracking-tight">Take full control of design &amp; development.</h2>
            <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="#">Get Started</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
              <div class="flex flex-col justify-between p-8 h-full bg-gray-100 border border-gray-100 rounded-3xl">
                <svg class="mb-28" 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>
                <h3 class="font-heading text-xl text-gray-900 font-black xl:w-40">Unlimited team members</h3>
              </div>

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 md:px-16 bg-gray-100 border border-gray-100 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-sm">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">What we found</span>
            <h2 class="font-heading mb-8 text-4xl text-gray-900 font-black tracking-tight">Take full control of design &amp; development.</h2>
            <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="#">Get Started</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
              <div class="flex flex-col justify-between p-8 h-full bg-white border border-gray-100 rounded-3xl">
                <svg class="mb-28" 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>
                <h3 class="font-heading text-xl text-gray-900 font-black xl:w-40">Unlimited team members</h3>
              </div>

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative pt-16 lg:pt-40 lg:pb-44 bg-white 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-white w-full h-full"></div>
        <img src="zanrly-assets/images/applications/pattern-wave-gray.png" alt="">
      </div>
      <img class="relative z-10 md:absolute md:top-1/2 md:left-0 md:w-1/2 md:transform md:-translate-y-1/2 xl:w-auto mx-auto md:mr-0 pr-8 pb-8 md:pr-0 md:pb-0" src="zanrly-assets/images/applications/mockup2.png" alt="">
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap justify-end items-center -m-8">
          <div class="w-full md:w-1/2 p-8 mb-16 lg:mb-0">
            <div class="md:max-w-xl px-8">
              <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-gray-900 font-black tracking-tight">Great work starts with your app</h2>
              <p class="mb-6 text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
              <div class="md:max-w-md">
                <div class="flex flex-wrap -m-2">
                  <div class="w-auto p-2">
                    <div class="flex flex-wrap px-3 py-2 bg-gray-100 rounded-full">
                      <div class="w-auto mr-2 pt-1">
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M8.095 1H3.905C2.085 1 1 2.085 1 3.905V8.09C1 9.915 2.085 11 3.905 11H8.09C9.91 11 10.995 9.915 10.995 8.095V3.905C11 2.085 9.915 1 8.095 1ZM8.39 4.85L5.555 7.685C5.485 7.755 5.39 7.795 5.29 7.795C5.19 7.795 5.095 7.755 5.025 7.685L3.61 6.27C3.465 6.125 3.465 5.885 3.61 5.74C3.755 5.595 3.995 5.595 4.14 5.74L5.29 6.89L7.86 4.32C8.005 4.175 8.245 4.175 8.39 4.32C8.535 4.465 8.535 4.7 8.39 4.85Z" fill="#3B82F6"></path>
                        </svg>
                      </div>

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 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 w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="max-w-lg mb-16 mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -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">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-20">
                <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                      <div class="inline-block w-full whitespace-normal">
                        <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>

<section class="py-16 bg-white 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="flex flex-col justify-between h-full">
          <div class="flex-initial mb-10">
            <div class="md:max-w-lg">
              <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Frequently Asked Questions</h2>
              <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 class="flex-initial">
            <div class="flex flex-wrap -m-4">
              <div class="w-full p-4">
                <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-white border border-gray-100 rounded-3xl cursor-pointer">
                  <div class="flex flex-wrap -m-2">
                    <div class="flex-1 p-2">
                      <h3 class="font-heading text-xl text-gray-900 font-black">How does Zanrly help you in problems?</h3>
                      <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                          <p class="text-gray-500 mt-3 font-bold">Lorem ipsum dolor sit amet, to the consectr adipiscing elit. Volutpat tempor to the condi mentum.</p>
                      </div>
                    </div>
                    <div class="w-auto p-2">
                        <span class="inline-block transform" :class="{'rotate-180': accordion, 'rotate-0': !accordion }">

<section class="py-16 bg-gray-900 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col justify-between h-full">
            <div class="flex-initial mb-10">
              <div class="md:max-w-lg">
                <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Frequently Asked Questions</h2>
                <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 class="flex-initial">
              <div class="flex flex-wrap -m-4">
                <div class="w-full p-4">
                  <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-900 border border-gray-800 rounded-3xl cursor-pointer">
                    <div class="flex flex-wrap -m-2">
                      <div class="flex-1 p-2">
                        <h3 class="font-heading text-xl text-white font-black">How does Zanrly help you in problems?</h3>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">

<section class="py-16 bg-gray-900 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-dark w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col justify-between h-full">
            <div class="flex-initial mb-10">
              <div class="md:max-w-lg">
                <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Frequently Asked Questions</h2>
                <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 class="flex-initial">
              <div class="flex flex-wrap -m-4">
                <div class="w-full p-4">
                  <div x-data="{ accordion: false }" x-on:click="accordion = !accordion" class="block p-10 bg-gray-800 border border-gray-800 rounded-3xl cursor-pointer">
                    <div class="flex flex-wrap -m-2">
                      <div class="flex-1 p-2">
                        <h3 class="font-heading text-xl text-white font-black">How does Zanrly help you in problems?</h3>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">

<section class="py-10 bg-gray-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 bg-gray-900 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 w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-dark.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="mb-10 md:max-w-4xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Discover the journall</h2>
        </div>
        <div class="flex flex-wrap -m-8">
          <div class="w-full p-8">
            <img class="mb-9 w-full" src="zanrly-assets/images/blog/blog-screen2.png" alt="">
            <div class="flex flex-wrap -m-4">
              <div class="w-full md:w-1/2 p-4">
                <p class="mb-3 text-xs text-gray-400 font-bold">Design process • 4 min read</p>
                <a class="group inline-block" href="#">
                  <h3 class="font-heading text-3xl text-white hover:text-gray-200 group-hover:underline font-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                </a>
              </div>
              <div class="w-full md:w-1/2 p-4">
                <p class="mb-6 text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum tincidunt augue, at viverra erat faucibus vitae. Curabitur quis tincidunt neque. Nullam laoreet sapien ultricies, consectetur turpis eu, placerat ligula.</p>

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ activeSlide: 1, slideCount: 3 }">
  <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="max-w-lg mb-16 mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Testimonials</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-100 font-black tracking-tight">Our customer says</h2>
        </div>
        <div class="flex flex-wrap -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">
            <div class="flex flex-col justify-between h-full">
              <div class="mb-20">
                <div class="overflow-hidden">
                  <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                      <div class="inline-block w-full whitespace-normal">
                        <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 class="visibility-item inline-block w-full whitespace-normal">
                        <p class="mb-10 text-2xl text-gray-500 font-bold">"Experienced a sudden website malfunction, leading me to contact Shuffle Editor for assistance. Despite a 12-hour time difference, their prompt response and eagerness to address and resolve the issue were truly commendable. Grateful for their quick and effective support."</p>

<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 rounded-3xl">
      <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2" src="zanrly-assets/images/newsletter/pattern-net-white3.svg" alt="">
      <div class="relative z-10">
        <div class="mb-6 max-w-lg mx-auto text-center">
          <span class="inline-block mb-2 text-sm text-blue-500 font-bold uppercase tracking-widest">Newsletter</span>
          <h2 class="font-heading text-4xl md:text-5xl text-gray-900 font-black tracking-tight">Join to get exclusive contents for free.</h2>
        </div>
        <div class="md:max-w-sm mx-auto mb-10">
          <div class="flex flex-wrap -m-2">
            <div class="w-full p-2">
              <input class="px-6 py-3.5 w-full text-lg text-gray-500 text-center font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterLightPatternInput4-1" type="text" placeholder="Email address">
            </div>
            <div class="w-full p-2">
              <div class="flex flex-wrap justify-center -m-2">
                <div class="w-full 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>
        <div class="flex flex-wrap justify-center -m-3">
          <div class="w-auto p-3">
            <div class="flex flex-wrap">

<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-sm">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">What we found</span>
            <h2 class="font-heading mb-8 text-4xl text-gray-100 font-black tracking-tight">Take full control of design &amp; development.</h2>
            <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="#">Get Started</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
              <div class="flex flex-col justify-between p-8 h-full bg-gray-900 rounded-3xl">
                <svg class="mb-28" 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>
                <h3 class="font-heading text-xl text-gray-100 font-black xl:w-40">Unlimited team members</h3>
              </div>

<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-sm">
            <span class="inline-block mb-5 text-sm text-blue-500 font-bold uppercase tracking-widest">What we found</span>
            <h2 class="font-heading mb-8 text-4xl text-gray-100 font-black tracking-tight">Take full control of design &amp; development.</h2>
            <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="#">Get Started</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="flex flex-wrap -m-4">
            <div class="w-full lg:w-1/2 p-4">
              <div class="flex flex-col justify-between p-8 h-full bg-gray-900 rounded-3xl">
                <svg class="mb-28" 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-800 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-20 px-8 text-center bg-gradient-green rounded-3xl">
      <div class="md:max-w-xl mx-auto">
        <h2 class="font-heading mb-12 text-4xl md:text-5xl text-white font-black tracking-tight">Hard to believe? Analyze your website</h2>
        <div class="flex flex-wrap items-center -m-3 mb-4">
          <div class="w-full md:flex-1 p-3">
            <input class="px-6 py-4 w-full text-gray-300 font-bold bg-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-300 rounded-full" id="ctaInput5-1" type="text" placeholder="Enter email to get started">
          </div>
          <div class="w-full md:w-auto p-3">
            <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="#">Get Started Now</a></div>
            </div>
          </div>
        </div>
        <p class="text-xs text-white font-bold">
          <span>12,000+ People are already using</span>
          <span class="font-black">Zanrly</span>
          <span>for their business</span>
        </p>
      </div>
    </div>
  </div>
</section>