Tailwind CSS Components

<section class="py-10 bg-gray-900 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-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 md:px-16 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 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-900 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-white 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="relative pb-32 md:pb-64 bg-gray-900 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-dark w-full h-full"></div>
    <img src="zanrly-assets/images/pattern-dark.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-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="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-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">

<section class="py-10 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 bg-white rounded-3xl">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8 mb-8">
          <div class="w-full md:w-1/3 p-8">
            <img class="mb-6" src="zanrly-assets/logos/zanrly-logo-small.svg" alt="">
            <p class="text-xl font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum.</p>
          </div>
          <div class="w-full md:w-1/3 p-8">
            <ul class="md:max-w-max ml-auto">
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Products</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">About us</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Careers</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Portfolio</a></li>
              <li><a class="inline-block text-3xl text-gray-700 hover:text-blue-500 font-black tracking-tight" href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/3 p-8">
            <ul class="md:max-w-max ml-auto">
              <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">Docs</a></li>
              <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">Knowledge Base</a></li>
              <li class="mb-4"><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">System Status</a></li>
              <li><a class="inline-block text-gray-500 hover:text-gray-600 font-medium" href="#">Security</a></li>

<section class="py-10 bg-gray-50 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-gray w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-white.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 overflow-hidden border border-gray-50 rounded-3xl">
          <div class="flex flex-wrap items-stretch">
            <div class="w-full sm:w-1/3 border-b sm:border-r border-gray-50">
              <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-50">
              <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-50">
              <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-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="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="py-32 px-8 text-center h-full border border-gray-100 overflow-hidden rounded-3xl">
          <div class="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-white outline-none focus:ring-4 focus:ring-blue-200 placeholder-gray-500 rounded-full" id="newsletterLightBorderInput2-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>
          </div>

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 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 max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-8 mb-8">
          <div class="w-full md:w-1/3 p-8">
            <img class="mb-6" src="zanrly-assets/logos/zanrly-logo-small-white2.svg" alt="">
            <p class="text-xl text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis volutpat velit, quis iaculis velit bibendum.</p>
          </div>
          <div class="w-full md:w-1/3 p-8">
            <ul class="md:max-w-max ml-auto">
              <li class="mb-6"><a class="inline-block text-3xl text-gray-200 hover:text-blue-500 font-black tracking-tight" href="#">Products</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-200 hover:text-blue-500 font-black tracking-tight" href="#">About us</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-200 hover:text-blue-500 font-black tracking-tight" href="#">Careers</a></li>
              <li class="mb-6"><a class="inline-block text-3xl text-gray-200 hover:text-blue-500 font-black tracking-tight" href="#">Portfolio</a></li>
              <li><a class="inline-block text-3xl text-gray-200 hover:text-blue-500 font-black tracking-tight" href="#">Contact Us</a></li>
            </ul>
          </div>
          <div class="w-full md:w-1/3 p-8">
            <ul class="md:max-w-max ml-auto">

<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="py-32 px-8 text-center h-full bg-white overflow-hidden rounded-3xl">
          <div class="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="newsletterLightReverseInput2-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>
          </div>

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-gray-900 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-6">
          <div class="w-full p-4">
            <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
            <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="relative px-8">
      <div class="max-w-7xl mx-auto">
        <div class="absolute top-0 left-0 w-full h-1/2 bg-gray-900 border-l border-r border-b border-gray-800 rounded-b-3xl"></div>
        <div class="relative z-10 flex flex-nowrap -m-4">
          <div class="flex-shrink-0 max-w-sm p-4">
            <a class="inline-block h-full overflow-hidden border border-gray-800 rounded-3xl shadow-3xl" href="#">
              <div class="flex flex-col justify-between p-10 h-full bg-gray-900">
                <div class="flex-initial mb-10">

<section x-data="{ showContent: false }" 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">
      <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="mb-10 md:max-w-2xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">More from Newsroom</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-4 mb-12">
          <div class="w-full md:w-1/2 p-4">
            <div class="p-8 h-full bg-white rounded-3xl">
              <div class="flex flex-wrap -m-3">
                <div class="w-auto p-3">
                  <img src="zanrly-assets/images/blog/avatar.png" alt="">
                </div>
                <div class="flex-1 p-3">
                  <div class="flex flex-col justify-between h-full">
                    <div class="flex-initial mb-8">
                      <p class="mb-3 text-xs text-gray-500 font-bold">Design process • 4 min read</p>

<section class="py-10 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="py-16 px-8 overflow-hidden border border-gray-100 rounded-3xl">
      <div class="max-w-7xl mx-auto mb-20">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex flex-nowrap -m-4 transition-transform duration-500 ease-in-out">
          <div x-ref="slide1" class="relative flex-shrink-0 max-w-3xl w-full p-4">
            <div :class="{ 'hidden': activeSlide == 0 }" class="hidden absolute z-10 top-0 left-0 bg-white bg-opacity-80 w-full h-full"></div>
            <div class="flex flex-wrap items-center -m-4">
              <div class="w-auto p-4">
                <img class="rounded-3xl" src="zanrly-assets/images/teams/woman.png" alt="">
              </div>
              <div class="flex-1 p-4">
                <div class="flex flex-col justify-between h-full">
                  <div class="flex-initial mb-6">
                    <h3 class="font-heading mb-2 text-4xl text-gray-900 font-black tracking-tight">Monica Johnson</h3>
                    <p class="text-lg text-gray-500 font-bold">CEO &amp; Founder</p>
                  </div>
                  <div class="flex-initial">
                    <p class="mb-8 text-gray-700 font-bold">Renowned for his experience in brand strategy and visual identities, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
                    <div class="flex flex-wrap -m-1.5">
                      <div class="w-auto p-1.5">
                        <a class="flex items-center justify-center w-10 h-10 bg-white rounded-full" href="#">
                          <img src="zanrly-assets/images/insta.svg" alt="">
                        </a>

<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="max-w-7xl mx-auto">
        <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full" src="zanrly-assets/images/contact/pattern-white2.svg" alt="">
        <div class="relative mb-10 md:max-w-3xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Want to reach out directly?</h2>
          <p class="md:max-w-md text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="relative mb-6 p-10 bg-white border border-gray-100 rounded-3xl">
          <div class="flex flex-wrap -m-3 mb-3">
            <div class="w-auto p-3">
              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-gray-100 rounded-xl">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                  <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                  <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                </svg>
              </div>
            </div>
            <div class="flex-1 p-3">
              <p class="text-gray-500 font-bold">Address</p>
              <h3 class="font-heading text-xl text-gray-900 font-black">380 St Killda Road, Mellbourne VIC 3004, Australia</h3>

<section x-data="{ showContent: false }" 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-2xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">More from Newsroom</h2>
          <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-4 mb-12">
          <div class="w-full md:w-1/2 p-4">
            <div class="p-8 h-full bg-gray-800 rounded-3xl">
              <div class="flex flex-wrap -m-3">
                <div class="w-auto p-3">
                  <img src="zanrly-assets/images/blog/avatar.png" alt="">
                </div>
                <div class="flex-1 p-3">
                  <div class="flex flex-col justify-between h-full">
                    <div class="flex-initial mb-8">
                      <p class="mb-3 text-xs text-gray-500 font-bold">Design process • 4 min read</p>

<section class="py-10 bg-gray-900 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative px-8 pt-16 bg-gray-800 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-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-6">
          <div class="w-full p-4">
            <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">We are hiring</span>
            <h2 class="font-heading text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Open positions</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="relative px-8">
      <div class="max-w-7xl mx-auto">
        <div class="absolute top-0 left-0 w-full h-1/2 bg-gray-800 border-l border-r border-b border-gray-800 rounded-b-3xl"></div>
        <div class="relative z-10 flex flex-nowrap -m-4">
          <div class="flex-shrink-0 max-w-sm p-4">
            <a class="inline-block h-full overflow-hidden border border-gray-800 rounded-3xl shadow-3xl" href="#">
              <div class="flex flex-col justify-between p-10 h-full bg-gray-800">
                <div class="flex-initial mb-10">

<section x-data="{ showContent: false }" 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-10 md:max-w-2xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">More from Newsroom</h2>
          <p class="text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-4 mb-12">
          <div class="w-full md:w-1/2 p-4">
            <div class="p-8 h-full bg-gray-900 rounded-3xl">
              <div class="flex flex-wrap -m-3">
                <div class="w-auto p-3">
                  <img src="zanrly-assets/images/blog/avatar.png" alt="">
                </div>
                <div class="flex-1 p-3">
                  <div class="flex flex-col justify-between h-full">
                    <div class="flex-initial mb-8">
                      <p class="mb-3 text-xs text-gray-500 font-bold">Design process • 4 min read</p>
                      <a class="group inline-block mb-4" href="#">
                        <h3 class="font-heading text-xl text-white hover:text-gray-200 group-hover:underline font-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                      </a>
                    </div>

<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="max-w-7xl mx-auto">
        <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full" src="zanrly-assets/images/contact/pattern-dark2.svg" alt="">
        <div class="relative mb-10 md:max-w-3xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-white font-black tracking-tight">Want to reach out directly?</h2>
          <p class="md:max-w-md text-gray-400 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="relative mb-6 p-10 bg-gray-800 rounded-3xl">
          <div class="flex flex-wrap -m-3 mb-3">
            <div class="w-auto p-3">
              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-gray-900 rounded-xl">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                  <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                  <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                </svg>
              </div>
            </div>
            <div class="flex-1 p-3">
              <p class="text-gray-500 font-bold">Address</p>
              <h3 class="font-heading text-xl text-white font-black">380 St Killda Road, Mellbourne VIC 3004, Australia</h3>

<section x-data="{ showContent: false }" class="py-10 bg-white overflow-hidden">
  <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="mb-10 md:max-w-2xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Blog</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">More from Newsroom</h2>
          <p class="text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="flex flex-wrap -m-4 mb-12">
          <div class="w-full md:w-1/2 p-4">
            <div class="p-8 h-full bg-gray-100 rounded-3xl">
              <div class="flex flex-wrap -m-3">
                <div class="w-auto p-3">
                  <img src="zanrly-assets/images/blog/avatar.png" alt="">
                </div>
                <div class="flex-1 p-3">
                  <div class="flex flex-col justify-between h-full">
                    <div class="flex-initial mb-8">
                      <p class="mb-3 text-xs text-gray-500 font-bold">Design process • 4 min read</p>
                      <a class="group inline-block mb-4" href="#">
                        <h3 class="font-heading text-xl text-gray-900 hover:text-gray-700 group-hover:underline font-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                      </a>
                    </div>

<section class="py-10 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 overflow-hidden bg-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 mb-20">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex flex-nowrap -m-4 transition-transform duration-500 ease-in-out">
          <div x-ref="slide1" class="relative flex-shrink-0 max-w-3xl w-full p-4">
            <div :class="{ 'hidden': activeSlide == 0 }" class="hidden absolute z-10 top-0 left-0 bg-gray-100 bg-opacity-80 w-full h-full"></div>
            <div class="flex flex-wrap items-center -m-4">
              <div class="w-auto p-4">
                <img class="rounded-3xl" src="zanrly-assets/images/teams/woman.png" alt="">
              </div>
              <div class="flex-1 p-4">
                <div class="flex flex-col justify-between h-full">
                  <div class="flex-initial mb-6">
                    <h3 class="font-heading mb-2 text-4xl text-gray-900 font-black tracking-tight">Monica Johnson</h3>
                    <p class="text-lg text-gray-500 font-bold">CEO &amp; Founder</p>
                  </div>
                  <div class="flex-initial">
                    <p class="mb-8 text-gray-700 font-bold">Renowned for his experience in brand strategy and visual identities, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
                    <div class="flex flex-wrap -m-1.5">

<section class="py-10 bg-gray-50 overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 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 max-w-7xl mx-auto mb-20">
        <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex flex-nowrap -m-4 transition-transform duration-500 ease-in-out">
          <div x-ref="slide1" class="relative flex-shrink-0 max-w-3xl w-full p-4">
            <div :class="{ 'hidden': activeSlide == 0 }" class="hidden absolute z-10 top-0 left-0 bg-white bg-opacity-80 w-full h-full"></div>
            <div class="flex flex-wrap items-center -m-4">
              <div class="w-auto p-4">
                <img class="rounded-3xl" src="zanrly-assets/images/teams/woman.png" alt="">
              </div>
              <div class="flex-1 p-4">
                <div class="flex flex-col justify-between h-full">
                  <div class="flex-initial mb-6">
                    <h3 class="font-heading mb-2 text-4xl text-gray-900 font-black tracking-tight">Monica Johnson</h3>
                    <p class="text-lg text-gray-500 font-bold">CEO &amp; Founder</p>
                  </div>
                  <div class="flex-initial">
                    <p class="mb-8 text-gray-700 font-bold">Renowned for his experience in brand strategy and visual identities, lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
                    <div class="flex flex-wrap -m-1.5">

<section class="py-10 bg-white overflow-hidden">
  <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="max-w-7xl mx-auto">
        <img class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full" src="zanrly-assets/images/contact/pattern-gray2.svg" alt="">
        <div class="relative mb-10 md:max-w-3xl">
          <span class="inline-block mb-4 text-sm text-blue-500 font-bold uppercase tracking-widest">Contact Us</span>
          <h2 class="font-heading mb-6 text-4xl md:text-5xl lg:text-6xl text-gray-900 font-black tracking-tight">Want to reach out directly?</h2>
          <p class="md:max-w-md text-gray-500 font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
        </div>
        <div class="relative mb-6 p-10 bg-white border border-gray-100 rounded-3xl">
          <div class="flex flex-wrap -m-3 mb-3">
            <div class="w-auto p-3">
              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-gray-100 rounded-xl">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.666 21.3334C18.666 23.6934 17.6393 25.8267 15.9993 27.2801C14.586 28.5601 12.7193 29.3334 10.666 29.3334C6.25268 29.3334 2.66602 25.7467 2.66602 21.3334C2.66602 18.6338 4.01797 16.2419 6.07321 14.7965C6.40413 14.5638 6.85175 14.723 7.03033 15.086C8.28888 17.6443 10.6049 19.56 13.3593 20.3067C14.1993 20.5467 15.0793 20.6667 15.9993 20.6667C16.649 20.6667 17.2713 20.6051 17.8759 20.4917C18.2604 20.4196 18.6431 20.666 18.66 21.0568C18.664 21.1495 18.666 21.2419 18.666 21.3334Z" fill="#3B82F6"></path>
                  <path d="M24 10.6666C24 11.7066 23.8 12.7066 23.44 13.6133C22.52 15.9333 20.5467 17.72 18.1067 18.3866C17.44 18.5733 16.7333 18.6666 16 18.6666C15.2667 18.6666 14.56 18.5733 13.8933 18.3866C11.4533 17.72 9.48 15.9333 8.56 13.6133C8.2 12.7066 8 11.7066 8 10.6666C8 6.25329 11.5867 2.66663 16 2.66663C20.4133 2.66663 24 6.25329 24 10.6666Z" fill="#3B82F6"></path>
                  <path d="M29.3327 21.3334C29.3327 25.7467 25.746 29.3334 21.3327 29.3334C20.34 29.3334 19.3851 29.1524 18.5075 28.8188C18.0826 28.6573 18.0033 28.1135 18.2991 27.7683C19.8218 25.9918 20.666 23.7147 20.666 21.3334C20.666 20.8801 20.626 20.4267 20.5593 20.0001V20.0001C20.5197 19.7541 20.6452 19.5123 20.8631 19.3917C22.6286 18.4143 24.0702 16.9168 24.9687 15.0871C25.1472 14.7237 25.5951 14.5641 25.9263 14.797C27.9811 16.2425 29.3327 18.6341 29.3327 21.3334Z" fill="#3B82F6"></path>
                </svg>
              </div>
            </div>
            <div class="flex-1 p-3">
              <p class="text-gray-500 font-bold">Address</p>
              <h3 class="font-heading text-xl text-gray-900 font-black">380 St Killda Road, Mellbourne VIC 3004, Australia</h3>