Tailwind CSS Components

<section class="py-10 bg-white overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-white 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="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Sign in to your account</h3>
              <p class="text-gray-500 font-bold">Start your demo version</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="signInLightBorderInput5-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightBorderInput5-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightBorderInput5-2">Password</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightBorderInput5-2" type="password" placeholder="*************">
                </div>
                <div class="w-full p-3">
                  <div class="flex flex-wrap items-center justify-between -m-3">
                    <div class="w-auto p-3">

<section class="pt-10 pb-16 bg-gray-100 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="px-8 pt-16 bg-white border border-gray-100 rounded-t-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-200 hover:text-blue-500 bg-gray-100 hover:bg-gray-50 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-100 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.01977 0.319993L5.22977 3.52999L7.19977 5.48999C8.02977 6.31999 8.02977 7.66999 7.19977 8.49999L2.01977 13.68C1.33977 14.36 0.179766 13.87 0.179766 12.92V7.30999V1.07999C0.179766 0.119992 1.33977 -0.360007 2.01977 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>

<section class="pt-10 pb-16 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="px-8 pt-16 bg-gray-100 border-t border-l border-r border-gray-100 rounded-t-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-200 hover:text-blue-500 bg-white hover:bg-gray-50 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-white rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.01977 0.319993L5.22977 3.52999L7.19977 5.48999C8.02977 6.31999 8.02977 7.66999 7.19977 8.49999L2.01977 13.68C1.33977 14.36 0.179766 13.87 0.179766 12.92V7.30999V1.07999C0.179766 0.119992 1.33977 -0.360007 2.01977 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 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-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box-dark.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Join our community</h3>
              <p class="text-gray-500 font-bold">Start your journey with our product</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="signUpDarkReversePatternInput5-1">Name</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="signUpDarkReversePatternInput5-1" type="text" placeholder="Enter your name">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpDarkReversePatternInput5-2">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="signUpDarkReversePatternInput5-2" type="email" placeholder="Email address">

<section class="pt-10 pb-16 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-gray-100 overflow-hidden border-t border-l border-r border-gray-100 rounded-t-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 items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-200 hover:text-blue-500 bg-white hover:bg-gray-50 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-white rounded-full">

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-white rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Sign in to your account</h3>
              <p class="text-gray-500 font-bold">Start your demo version</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="signInLightReverseInput5-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightReverseInput5-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightReverseInput5-2">Password</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightReverseInput5-2" type="password" placeholder="*************">
                </div>
                <div class="w-full p-3">
                  <div class="flex flex-wrap items-center justify-between -m-3">
                    <div class="w-auto p-3">

<section class="pt-10 pb-16 bg-gray-900 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-gray-900 bg-opacity-60 overflow-hidden border-t border-l border-r border-gray-800 rounded-t-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="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-700 hover:text-blue-500 bg-gray-800 hover:bg-gray-900 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-800 rounded-full">

<section class="pt-10 pb-16 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-white overflow-hidden border-t border-l border-r border-gray-100 rounded-t-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="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-200 hover:text-blue-500 bg-gray-100 hover:bg-gray-50 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-100 rounded-full">

<section class="py-10 bg-white overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="p-10 bg-gray-100 rounded-3xl">
      <div class="flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Sign in to your account</h3>
              <p class="text-gray-500 font-bold">Start your demo version</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="signInLightInput5-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightInput5-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightInput5-2">Password</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-white placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightInput5-2" type="password" placeholder="*************">
                </div>
                <div class="w-full p-3">
                  <div class="flex flex-wrap items-center justify-between -m-3">
                    <div class="w-auto p-3">

<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-900 overflow-hidden border border-gray-800 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-wrap lg:items-center -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 border border-gray-800 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="pt-10 pb-16 bg-gray-900 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-gray-800 overflow-hidden rounded-t-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 max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-700 hover:text-blue-500 bg-gray-800 hover:bg-gray-900 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-900 rounded-full">

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 md:px-16 overflow-hidden bg-white 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 flex flex-wrap lg:items-center -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>

<section class="py-10 bg-gray-900 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 bg-gray-900 overflow-hidden border border-gray-800 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-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box-dark.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Join our community</h3>
              <p class="text-gray-500 font-bold">Start your journey with our product</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="signUpDarkBorderPatternInput5-1">Name</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="signUpDarkBorderPatternInput5-1" type="text" placeholder="Enter your name">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signUpDarkBorderPatternInput5-2">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="signUpDarkBorderPatternInput5-2" type="email" placeholder="Email address">

<section class="pt-10 pb-16 bg-gray-900 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="px-8 pt-16 bg-gray-900 bg-opacity-60 border-t border-l border-r border-gray-800 rounded-t-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-700 hover:text-blue-500 bg-gray-800 hover:bg-gray-900 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-800 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.01977 0.319993L5.22977 3.52999L7.19977 5.48999C8.02977 6.31999 8.02977 7.66999 7.19977 8.49999L2.01977 13.68C1.33977 14.36 0.179766 13.87 0.179766 12.92V7.30999V1.07999C0.179766 0.119992 1.33977 -0.360007 2.01977 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>

<section class="py-10 bg-white overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 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 flex flex-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-black font-black tracking-tight">Sign in to your account</h3>
              <p class="text-gray-500 font-bold">Start your demo version</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="signInLightBorderPatternInput5-1">Email Address</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightBorderPatternInput5-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-500 font-bold" for="signInLightBorderPatternInput5-2">Password</label>
                  <input class="appearance-none px-6 py-3.5 w-full text-lg text-gray-500 font-bold bg-gray-100 placeholder-gray-500 outline-none border border-gray-200 focus:ring-4 focus:ring-blue-200 rounded-full" id="signInLightBorderPatternInput5-2" type="password" placeholder="*************">

<section class="pt-10 pb-16 bg-gray-800 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="px-8 pt-16 bg-gray-900 bg-opacity-60 rounded-t-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-700 hover:text-blue-500 bg-gray-800 hover:bg-gray-900 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-800 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.01977 0.319993L5.22977 3.52999L7.19977 5.48999C8.02977 6.31999 8.02977 7.66999 7.19977 8.49999L2.01977 13.68C1.33977 14.36 0.179766 13.87 0.179766 12.92V7.30999V1.07999C0.179766 0.119992 1.33977 -0.360007 2.01977 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>

<section class="py-10 bg-gray-800 overflow-hidden" x-data="{ activeSlide: 1 }">
  <div class="container mx-auto px-4">
    <div class="relative p-10 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-wrap -m-8">
        <div class="w-full md:w-1/2 p-8">
          <div class="py-12 md:py-32 md:max-w-md mx-auto">
            <div class="mb-10 text-center">
              <img class="mb-6 mx-auto" src="zanrly-assets/logos/logo-box-dark.svg" alt="">
              <h3 class="font-heading mb-3 text-3xl text-white font-black tracking-tight">Sign in to your account</h3>
              <p class="text-gray-400 font-bold">Start your demo version</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="signInDarkReversePatternInput5-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="signInDarkReversePatternInput5-1" type="email" placeholder="Enter email address">
                </div>
                <div class="w-full p-3">
                  <label class="block mb-2 text-sm text-gray-400 font-bold" for="signInDarkReversePatternInput5-2">Password</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="signInDarkReversePatternInput5-2" type="password" placeholder="*************">

<section class="pt-10 pb-16 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="px-8 pt-16 bg-white border-t border-l border-r border-gray-100 rounded-t-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-200 hover:text-blue-500 bg-gray-100 hover:bg-gray-50 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-100 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.01977 0.319993L5.22977 3.52999L7.19977 5.48999C8.02977 6.31999 8.02977 7.66999 7.19977 8.49999L2.01977 13.68C1.33977 14.36 0.179766 13.87 0.179766 12.92V7.30999V1.07999C0.179766 0.119992 1.33977 -0.360007 2.01977 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>

<section class="pt-10 pb-16 bg-gray-800 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 10 }">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-gray-900 overflow-hidden rounded-t-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="flex flex-wrap items-center justify-between -m-4 pb-12">
          <div class="w-full md:w-1/2 p-4">
            <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="w-full md:w-1/2 p-4">
            <div class="flex flex-wrap md:justify-end -m-2">
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block px-10 py-3.5 text-gray-700 hover:text-blue-500 bg-gray-800 hover:bg-gray-900 rounded-full">
                  <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.98023 0.319993L2.77023 3.52999L0.800234 5.48999C-0.0297656 6.31999 -0.0297656 7.66999 0.800234 8.49999L5.98023 13.68C6.66023 14.36 7.82023 13.87 7.82023 12.92V7.30999V1.07999C7.82023 0.119992 6.66023 -0.360007 5.98023 0.319993Z" fill="currentColor"></path>
                  </svg>
                </button>
              </div>
              <div class="w-auto p-2">
                <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block px-10 py-3.5 text-blue-500 bg-gray-800 rounded-full">

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 md:px-16 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 flex flex-wrap lg:items-center -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>