Shuffle Components in Nightsable library

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <p class="mb-10 text-gray-300 text-center">200,000+ teams have found focus with Slite</p>
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center justify-center -m-6">
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/rbs-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/nine-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/drift-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/seek-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/deloitte-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/wise-white.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-8 text-sm text-green-400 font-medium tracking-tighter">Check ourstats</span>
      <div class="flex flex-wrap -m-11">
        <div class="w-full md:w-1/2 lg:w-1/4 p-11">
          <div class="text-center">
            <h3 class="mb-1.5 text-7xl text-white tracking-4xl">$1.5B+</h3>
            <p class="text-gray-300">Assets Under Managment</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 p-11">
          <div class="text-center">
            <h3 class="mb-1.5 text-7xl text-white tracking-4xl">100+</h3>
            <p class="text-gray-300">Assets Under Managment</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 p-11">
          <div class="text-center">
            <h3 class="mb-1.5 text-7xl text-white tracking-4xl">150+</h3>
            <p class="text-gray-300">Assets Under Managment</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/4 p-11">
          <div class="text-center">
            <h3 class="mb-1.5 text-7xl text-white tracking-4xl">40+</h3>
            <p class="text-gray-300">Assets Under Managment</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="py-14 bg-gray-900 bg-opacity-30 rounded-6xl">
      <div class="md:max-w-2xl mx-auto text-center px-4">
        <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h2 class="font-heading mb-6 text-5xl text-white tracking-5xl">Industry insights you wan`t delete. Delivered to your inbox weekly</h2>
        <p class="mb-12 text-gray-300 max-w-lg mx-auto">Join 10,000 founders, get early access to Nightsable features, and learn how to squeeze every drop of revenue</p>
      </div>
      <div class="px-4">
        <div class="flex flex-wrap md:max-w-xl mx-auto -m-2">
          <div class="w-full md:flex-1 p-2">
            <div class="md:max-w-xl mx-auto border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
              <input class="px-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
            </div>
          </div>
          <div class="w-full md:w-auto p-2"><a class="inline-block px-14 py-4 font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Subscribe</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-24 md:pb-28 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Check our stats</span>
          <h1 class="font-heading text-6xl md:text-7xl text-white tracking-tighter-xl">Making credit history with nightcard</h1>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <h3 class="mb-8 text-2xl text-white tracking-tighter">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</h3>
        <p class="mb-10 text-lg text-gray-300">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
        <a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Read more</a>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-1/2 p-8">
      <div class="px-4 pt-10 md:pb-40 max-w-lg mx-auto">
        <div class="flex flex-wrap items-center justify-between mb-36 -m-2">
          <div class="w-auto p-2">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-gray-300">
              <span>Dont have an account?</span>
              <a class="underline" href="#">Sign up</a>
            </p>
          </div>
        </div>
        <div class="text-center mx-auto">
          <h3 class="mb-4 text-5xl text-white tracking-5xl">Log in to your account</h3>
          <p class="mb-10 text-gray-300">Good to have you back!</p>
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Enter your email">
          </div>
          <div class="mb-6 relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <img class="absolute right-7 top-1/2 transform -translate-y-1/2" src="nightsable-assets/images/sign-in/eyeslash.svg" alt="">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="password" placeholder="Password">
          </div>
          <a class="block mb-6 px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a><a class="mb-10 inline-block text-sm text-gray-300 underline" href="#">Forgot password?</a>
          <div class="flex flex-wrap items-center mb-8">
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
            <div class="px-5 text-xs text-gray-300 font-medium">or sign in with email</div>
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
          </div>
          <div class="flex flex-wrap -1 mb-7">
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/google.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign in with Google</span>
              </a>
            </div>
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/apple-logo.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign in with Apple</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 p-8">
      <div class="flex flex-wrap items-center justify-center h-full bg-gradient-radial-dark py-16 px-4">
        <div class="w-full mb-8">
          <img class="mx-auto" src="nightsable-assets/images/sign-in/stats.png" alt="">
        </div>
        <div class="w-full">
          <p class="mb-8 text-sm text-center text-gray-300">Trusted by</p>
          <div class="flex flex-wrap items-center justify-center -m-4">
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/netflix.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/allianz.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/spotify.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/uber.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-24 lg:py-32 bg-gray-900 bg-opacity-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h2 class="font-heading mb-6 text-7xl text-white tracking-8xl md:max-w-sm">Get a Nightsable App</h2>
        <div class="flex flex-wrap -m-2.5 mb-10">
          <div class="w-auto p-2.5">
            <a href="#">
              <img src="nightsable-assets/images/application-section/app-store.png" alt="">
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a href="#">
              <img src="nightsable-assets/images/application-section/google-play.png" alt="">
            </a>
          </div>
        </div>
        <div class="flex flex-wrap items-center -m-4">
          <div class="w-auto p-4">
            <img src="nightsable-assets/images/application-section/qr-code.png" alt="">
          </div>
          <div class="flex-1 p-4">
            <a class="text-white" href="#">
              <p class="max-w-xs">Scan the QR code or go to Nightsablestudio.co/qr</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <img class="md:absolute md:right-0 md:bottom-0 md:w-8/12 2xl:w-auto" src="nightsable-assets/images/application-section/phone4.png" alt="">
</section>

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full p-4">
  <div class="relative py-8 bg-green-400 rounded-5xl">
    <div class="container px-4 mx-auto">
      <div class="relative flex flex-wrap items-center -m-2">
        <div class="w-full md:w-1/2 p-2">
          <h3 class="relative z-10 mb-2.5 text-2xl text-black font-medium tracking-2xl">Cookie Consent</h3>
          <p class="text-sm text-black text-opacity-60">In order to provide you with a more personal user experience, we and our selected third parties use cookies or similar technologies for technical purposes and, with your consent, for “basic interactions &amp; functionalities”, “experience enhancement”, “measurement” and “targeting &amp; advertising”. Denying consent may make related features unavailable. You can freely give, deny, or withdraw your consent at any time.Use the “I accept” button to consent to the use of such technologies.</p>
          <div class="absolute -top-10 left-3 w-32 h-14 bg-green-400 rounded-full"></div>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="flex flex-wrap md:justify-end -m-2">
            <div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 font-medium text-white tracking-tighter border-2 border-green-400 bg-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Accept All Cookies</a></div>
            <div class="w-auto p-2"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 text-black hover:text-white font-medium tracking-tighter hover:bg-black border-2 border-black focus:border-green-500 focus:border-opacity-40 hover:border-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Settings</a></div>
          </div>
        </div>
      </div>
    </div>
    <a x-on:click.prevent="modal = false" class="absolute top-7 right-7" href="#">
      <img src="nightsable-assets/images/cookies/close-black.png" alt="">
    </a>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
          <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Let`s talk</h2>
          <p class="mb-8 text-gray-300">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="mb-6 inline-block text-xl text-white font-medium" href="mailto:someone@example.com">contact@Nightsablestudio.co</a>
          <p class="text-xl text-white font-medium">(684) 555-0102</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="relative px-9 py-10 bg-blueGray-900 bg-opacity-30 max-w-lg mx-auto rounded-5xl">
          <h3 class="mb-6 text-2xl font-medium text-white">Contact us</h3>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="First name">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Last Name">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="E-mail">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Company">
          </div>
          <div class="mb-4 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <div class="relative overflow-hidden rounded-3xl">
              <select class="appearance-none pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Company">
                <option hidden="">What can we help you with?</option>
                <option>Poland</option>
                <option>Norway</option>
                <option>France</option>
              </select>
              <svg class="absolute right-8 top-1/2 transform -translate-y-1/2" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14.6004 1.4585L9.16706 6.89183C8.52539 7.5335 7.47539 7.5335 6.83372 6.89183L1.40039 1.4585" stroke="white" stroke-width="1.66667" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </div>
          <textarea class="mb-3 w-full px-6 py-4 text-gray-300 placeholder-gray-300 bg-transparent border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl resize-none" placeholder="Message" rows="9"></textarea>
          <div class="flex flex-wrap justify-end">
            <div class="w-auto"><a class="inline-block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Messge</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center -m-8 mb-28">
      <div class="w-full md:w-1/2 lg:w-4/12 p-8">
        <div class="md:max-w-xs">
          <img class="mb-7" src="nightsable-assets/logos/logo.svg" alt="">
          <p class="text-white">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-8">
        <h3 class="mb-6 text-lg text-white font-medium">About</h3>
        <ul>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Contact</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Blog</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Our Story</a></li>
          <li><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-8">
        <h3 class="mb-6 text-lg text-white font-medium">Company</h3>
        <ul>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Contact</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Blog</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Our Story</a></li>
          <li><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Careers</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/2 lg:flex-1 p-8">
        <div class="flex flex-wrap -m-2">
          <div class="w-full p-2">
            <a class="block py-5 px-8 bg-blueGray-900 bg-opacity-30 rounded-full" href="#">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <img src="nightsable-assets/images/footers/twitter.svg" alt="">
                </div>
                <div class="flex-1 p-2">
                  <p class="text-gray-300">Follow us on Twitter for updates</p>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-2">
            <a class="block py-5 px-8 bg-blueGray-900 bg-opacity-30 rounded-full" href="#">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <img src="nightsable-assets/images/footers/instagram.svg" alt="">
                </div>
                <div class="flex-1 p-2">
                  <p class="text-gray-300">Follow us on Instagram for updates</p>
                </div>
              </div>
            </a>
          </div>
          <div class="w-full p-2">
            <a class="block py-5 px-8 bg-blueGray-900 bg-opacity-30 rounded-full" href="#">
              <div class="flex flex-wrap items-center -m-2">
                <div class="w-auto p-2">
                  <img src="nightsable-assets/images/footers/tiktok-white.svg" alt="">
                </div>
                <div class="flex-1 p-2">
                  <p class="text-gray-300">Follow us on TikTok for updates</p>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap justify-between -m-2">
      <div class="w-auto p-2">
        <p class="inline-block text-sm font-medium text-white text-opacity-60">© 2023 Nightsablestudio.co</p>
      </div>
      <div class="w-auto p-2">
        <div class="flex flex-wrap items-center -m-2 sm:-m-7">
          <div class="w-auto p-2 sm:p-7"><a class="inline-block text-sm text-white text-opacity-60 hover:text-opacity-100 font-medium transition duration-300" href="#">Terms of Use</a></div>
          <div class="w-auto p-2 sm:p-7"><a class="inline-block text-sm text-white text-opacity-60 hover:text-opacity-100 font-medium transition duration-300" href="#">Privacy Policy</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 bg-blueGray-950">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-6 text-7xl lg:text-8xl text-white tracking-8xl md:max-w-md mx-auto">Protecting you and your money</h2>
      <p class="mb-20 text-white text-opacity-60 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="relative pt-16 px-10 pb-52 h-full bg-gradient-radial-dark border border-gray-800 border-opacity-30 rounded-5xl">
            <div class="relative z-10">
              <img class="mb-8 mx-auto" src="nightsable-assets/images/cards/card-image1.png" alt="">
              <h3 class="mb-6 text-3xl text-white tracking-3xl">Safeguarded with leading banks</h3>
              <p class="text-white text-opacity-60">For most currencies, there are no limits to the transfer amount. Certain currencies might have limits set by our payments partners. You will always see the limit in the Revolut app before making the transfer.</p>
            </div>
            <img class="absolute right-0 bottom-0" src="nightsable-assets/images/cards/card-blur.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="relative pt-16 px-10 pb-52 h-full bg-gradient-radial-dark border border-gray-800 border-opacity-30 rounded-5xl">
            <div class="relative z-10">
              <img class="mb-8 mx-auto" src="nightsable-assets/images/cards/card-image2.png" alt="">
              <h3 class="mb-6 text-3xl text-white tracking-3xl">We`re licensed money transmitter</h3>
              <p class="text-white text-opacity-60">For most currencies, there are no limits to the transfer amount. Certain currencies might have limits set by our payments partners. You will always see the limit in the Revolut app before making the transfer.</p>
            </div>
            <img class="absolute right-0 bottom-0" src="nightsable-assets/images/cards/card-blur.svg" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="relative pt-16 px-10 pb-52 h-full bg-gradient-radial-dark border border-gray-800 border-opacity-30 rounded-5xl">
            <div class="relative z-10">
              <img class="mb-8 mx-auto" src="nightsable-assets/images/cards/card-image3.png" alt="">
              <h3 class="mb-6 text-3xl text-white tracking-3xl">Audited Regularly</h3>
              <p class="text-white text-opacity-60">For most currencies, there are no limits to the transfer amount. Certain currencies might have limits set by our payments partners. You will always see the limit in the Revolut app before making the transfer.</p>
            </div>
            <img class="absolute right-0 bottom-0" src="nightsable-assets/images/cards/card-blur.svg" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="overflow-hidden">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-1/2 p-8">
      <div class="px-4 pt-10 md:pb-40 max-w-lg mx-auto">
        <div class="flex flex-wrap items-center justify-between mb-36 -m-2">
          <div class="w-auto p-2">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-gray-300">
              <span>Dont have an account?</span>
              <a class="underline" href="#">Sign up</a>
            </p>
          </div>
        </div>
        <div class="text-center mx-auto">
          <h3 class="mb-4 text-5xl text-white tracking-5xl">Let`s Get Started</h3>
          <p class="mb-10 text-gray-300">Good to have you back!</p>
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Full name">
          </div>
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Enter your email">
          </div>
          <div class="mb-6 relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <img class="absolute right-7 top-1/2 transform -translate-y-1/2" src="nightsable-assets/images/sign-in/eyeslash.svg" alt="">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-50 outline-none bg-transparent" type="password" placeholder="Password">
          </div>
          <a class="block mb-10 px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Sign up</a>
          <div class="flex flex-wrap items-center mb-8">
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
            <div class="px-5 text-xs text-gray-300 font-medium">or sign up with email</div>
            <div class="flex-1 bg-gray-900">
              <div class="h-px"></div>
            </div>
          </div>
          <div class="flex flex-wrap -1 mb-7">
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/google.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign up with Google</span>
              </a>
            </div>
            <div class="w-full p-1">
              <a class="p-5 flex flex-wrap justify-center bg-gray-900 hover:bg-gray-900 bg-opacity-30 hover:bg-opacity-10 rounded-full transition duration-300" href="#">
                <div class="mr-4 inline-block">
                  <img src="nightsable-assets/images/sign-in/apple-logo.svg" alt="">
                </div>
                <span class="text-sm text-white font-medium">Sign up with Apple</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-full md:w-1/2 p-8">
      <div class="flex flex-wrap items-center justify-center h-full bg-gradient-radial-dark py-16 px-4">
        <div class="w-full mb-8">
          <img class="mx-auto" src="nightsable-assets/images/sign-in/stats.png" alt="">
        </div>
        <div class="w-full">
          <p class="mb-8 text-sm text-center text-gray-300">Trusted by</p>
          <div class="flex flex-wrap items-center justify-center -m-4">
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/netflix.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/allianz.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/spotify.svg" alt="">
            </div>
            <div class="w-auto p-4">
              <img src="nightsable-assets/images/sign-in/uber.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Blog</h2>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-7/12 p-8">
        <div class="flex flex-wrap -m-6">
          <div class="w-full p-6">
            <div class="pb-6 border-b border-gray-900">
              <div class="flex flex-wrap items-center -m-2 mb-2">
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
                </div>
                <div class="w-auto p-2">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
                  </svg>
                </div>
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
                </div>
              </div>
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <a class="block" href="#">
                    <h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">Giving People Control Over Their Time nad What They See on Instagram</h3>
                  </a>
                </div>
                <div class="w-auto p-2">
                  <a href="#">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 2L2 20" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M20 18.5054V2H3.49464" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-6">
            <div class="pb-6 border-b border-gray-900">
              <div class="flex flex-wrap items-center -m-2 mb-2">
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
                </div>
                <div class="w-auto p-2">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
                  </svg>
                </div>
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
                </div>
              </div>
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <a class="block" href="#">
                    <h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">Continuing to Keep Instagram Safe and Secure</h3>
                  </a>
                </div>
                <div class="w-auto p-2">
                  <a class="opacity-0" href="#">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 2L2 20" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M20 18.5054V2H3.49464" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-6">
            <div class="pb-6 border-b border-gray-900">
              <div class="flex flex-wrap items-center -m-2 mb-2">
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
                </div>
                <div class="w-auto p-2">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
                  </svg>
                </div>
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
                </div>
              </div>
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <a class="block" href="#">
                    <h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">More Ways to connect on Instagram</h3>
                  </a>
                </div>
                <div class="w-auto p-2">
                  <a class="opacity-0" href="#">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 2L2 20" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M20 18.5054V2H3.49464" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-6">
            <div class="pb-6 border-b border-gray-900">
              <div class="flex flex-wrap items-center -m-2 mb-2">
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
                </div>
                <div class="w-auto p-2">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
                  </svg>
                </div>
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
                </div>
              </div>
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <a class="block" href="#">
                    <h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">Women in business: an interview with Sarah Townsend</h3>
                  </a>
                </div>
                <div class="w-auto p-2">
                  <a class="opacity-0" href="#">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 2L2 20" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M20 18.5054V2H3.49464" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-6">
            <div class="pb-6 border-b border-gray-900">
              <div class="flex flex-wrap items-center -m-2 mb-2">
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
                </div>
                <div class="w-auto p-2">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
                  </svg>
                </div>
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
                </div>
              </div>
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <a class="block" href="#">
                    <h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">Meet the Gifters</h3>
                  </a>
                </div>
                <div class="w-auto p-2">
                  <a class="opacity-0" href="#">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 2L2 20" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M20 18.5054V2H3.49464" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-6">
            <div class="pb-6 border-b border-gray-900">
              <div class="flex flex-wrap items-center -m-2 mb-2">
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
                </div>
                <div class="w-auto p-2">
                  <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
                  </svg>
                </div>
                <div class="w-auto p-2">
                  <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
                </div>
              </div>
              <div class="flex flex-wrap -m-2">
                <div class="flex-1 p-2">
                  <a class="block" href="#">
                    <h3 class="font-heading text-2xl text-white tracking-2xl hover:underline">New On-Demand updates!</h3>
                  </a>
                </div>
                <div class="w-auto p-2">
                  <a class="opacity-0" href="#">
                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M20 2L2 20" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      <path d="M20 18.5054V2H3.49464" stroke="white" stroke-width="2.45455" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-5/12 p-8">
        <div class="max-w-max mx-auto md:mr-0 overflow-hidden rounded-3xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/skyscraper3.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ showContent: false }" class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-6 text-7xl lg:text-8xl text-white tracking-8xl md:max-w-md mx-auto">Protecting you and your money</h2>
      <p class="mb-20 text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar2.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Leslie Alexander</h2>
                  <p class="text-sm text-gray-300">@lesliealexnader</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are very important to me. I regularly plan my expensesand save for the future.</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar3.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Kristin Watson</h2>
                  <p class="text-sm text-gray-300">@kristinawatson</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are very important to me. I regularly plan my expensesand save for the future.</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar4.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Marvin McKinney</h2>
                  <p class="text-sm text-gray-300">@marvinmckinney</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are a part of life that needs constant attention. I try to regularly analyze my expenses</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden">
            <div class="w-full p-3">
              <div class="px-6 py-8 border border-gray-800 rounded-5xl">
                <div class="flex flex-wrap items-center -m-3 mb-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/cards/avatar3.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h2 class="text-2xl text-white">Rob Mason</h2>
                    <p class="text-sm text-gray-300">@robmason</p>
                  </div>
                </div>
                <p class="mb-4 text-white">Prioritizing finances is a constant for me. I regularly budget and save, emphasizing the importance of planning for the future.</p>
                <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">5:48 PM</p>
                  </div>
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">Sep 15, 2023</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center -m-2.5">
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">232 like</p>
                  </div>
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">81 com.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar5.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Kathryn Murphy</h2>
                  <p class="text-sm text-gray-300">@kathrynmurphy</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are one of the most important things in life. I have to be careful not to spend too much and have enough money for everything</p>
              <p class="mb-4 text-white">I'm not very knowledgeable about finances, but I try to stay on top of my expenses and take advice from experts."</p>
              <p class="mb-4 text-white">I don't like thinking about finances, but I know I have to take care of them. I try to take care of my savings and control my expenses.</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar6.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Brooklyn Simm..</h2>
                  <p class="text-sm text-gray-300">@brooklynsimmons</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are a matter of responsibility and discipline for me. I try to monitor my expenses and savings on an ongoing basis to avoid financial problem</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden">
            <div class="w-full p-3">
              <div class="px-6 py-8 border border-gray-800 rounded-5xl">
                <div class="flex flex-wrap items-center -m-3 mb-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/cards/avatar2.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h2 class="text-2xl text-white">Lucas Floe</h2>
                    <p class="text-sm text-gray-300">@lucasfloe</p>
                  </div>
                </div>
                <p class="mb-4 text-white">I firmly believe that investing in education and acquiring new skills is pivotal for a secure financial future. It's a strategic move that aligns with my commitment to financial stability.</p>
                <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">5:48 PM</p>
                  </div>
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">Sep 15, 2023</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center -m-2.5">
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">232 like</p>
                  </div>
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">81 com.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar7.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Devon Lane</h2>
                  <p class="text-sm text-gray-300">@devonlane</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are a part of life that needs constant attention. I try to regularly analyze my expenses</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar8.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Arlene McCoy</h2>
                  <p class="text-sm text-gray-300">@arlenemccoy</p>
                </div>
              </div>
              <p class="mb-4 text-white">Finances are a part of life that needs constant attention. I try to regularly analyze my expenses</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar9.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Bessie Cooper</h2>
                  <p class="text-sm text-gray-300">@bessiecooper</p>
                </div>
              </div>
              <p class="mb-4 text-white">I'm interested in new technologies in the field of finance, such as blockchain or robo-advisors. I believe these new tools can help manage money more efficiently.</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden">
            <div class="w-full p-3">
              <div class="px-6 py-8 border border-gray-800 rounded-5xl">
                <div class="flex flex-wrap items-center -m-3 mb-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/cards/avatar9.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h2 class="text-2xl text-white">Mike Rochs</h2>
                    <p class="text-sm text-gray-300">@mikerochs</p>
                  </div>
                </div>
                <p class="mb-4 text-white">Financial management can be a source of stress. Balancing budgets and making prudent decisions requires careful consideration, but it's a challenge I navigate diligently.</p>
                <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">5:48 PM</p>
                  </div>
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">Sep 15, 2023</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center -m-2.5">
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">232 like</p>
                  </div>
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">81 com.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 p-3">
        <div class="flex flex-wrap -m-3">
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar10.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Jerome Bell</h2>
                  <p class="text-sm text-gray-300">@jeromebell</p>
                </div>
              </div>
              <p class="mb-4 text-white">I'm convinced that investing in education and acquiring new skills is a key factor in building a stable financial future.</p>
              <p class="mb-4 text-white">Managing finances can be stressful.</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full p-3">
            <div class="px-6 py-8 border border-gray-800 rounded-5xl">
              <div class="flex flex-wrap items-center -m-3 mb-3">
                <div class="w-auto p-3">
                  <img src="nightsable-assets/images/cards/avatar11.png" alt="">
                </div>
                <div class="w-auto p-3">
                  <h2 class="text-2xl text-white">Ronald Richards</h2>
                  <p class="text-sm text-gray-300">@ronaldrichards</p>
                </div>
              </div>
              <p class="mb-4 text-white">I'm convinced that investing in education and acquiring new skills is a key factor in building a stable financial future.</p>
              <p class="mb-4 text-white">Managing finances can be stressful.</p>
              <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">5:48 PM</p>
                </div>
                <div class="w-auto p-2.5">
                  <p class="text-sm text-gray-300">Sep 15, 2023</p>
                </div>
              </div>
              <div class="flex flex-wrap items-center -m-2.5">
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">232 like</p>
                </div>
                <div class="flex flex-wrap items-center w-auto p-2.5">
                  <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p class="text-sm text-gray-300">81 com.</p>
                </div>
              </div>
            </div>
          </div>
          <div :class="{ 'hidden': !showContent }" class="hidden">
            <div class="w-full p-3">
              <div class="px-6 py-8 border border-gray-800 rounded-5xl">
                <div class="flex flex-wrap items-center -m-3 mb-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/cards/avatar8.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h2 class="text-2xl text-white">Kevin Roland</h2>
                    <p class="text-sm text-gray-300">@kevinroland</p>
                  </div>
                </div>
                <p class="mb-4 text-white">Responsibility and discipline drive my approach to finances. Regularly monitoring expenses and savings is a routine for me, ensuring a proactive stance to prevent potential financial issues.</p>
                <p class="mb-4 text-white">Managing finances can be stressful.</p>
                <div class="flex flex-wrap items-center -m-2.5 mb-1.5">
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">5:48 PM</p>
                  </div>
                  <div class="w-auto p-2.5">
                    <p class="text-sm text-gray-300">Sep 15, 2023</p>
                  </div>
                </div>
                <div class="flex flex-wrap items-center -m-2.5">
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M8.41398 13.8731C8.18732 13.9531 7.81398 13.9531 7.58732 13.8731C5.65398 13.2131 1.33398 10.4597 1.33398 5.79307C1.33398 3.73307 2.99398 2.06641 5.04065 2.06641C6.25398 2.06641 7.32732 2.65307 8.00065 3.55974C8.67398 2.65307 9.75398 2.06641 10.9607 2.06641C13.0073 2.06641 14.6673 3.73307 14.6673 5.79307C14.6673 10.4597 10.3473 13.2131 8.41398 13.8731Z" stroke="#9F9FA0" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">232 like</p>
                  </div>
                  <div class="flex flex-wrap items-center w-auto p-2.5">
                    <svg class="mr-2.5" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M13.247 8.07345C12.8137 10.7001 10.8604 12.7201 8.24702 13.2135C6.81369 13.4868 5.45368 13.2735 4.28035 12.7201C4.08701 12.6268 3.77367 12.5868 3.56701 12.6335C3.12701 12.7401 2.38703 12.9201 1.76037 13.0668C1.16037 13.2135 0.78704 12.8401 0.933706 12.2401L1.36702 10.4401C1.42035 10.2335 1.37368 9.91345 1.28035 9.72012C0.747012 8.60012 0.533693 7.30012 0.753693 5.93345C1.18036 3.30678 3.30037 1.18012 5.92703 0.746784C10.2604 0.0467841 13.9537 3.74012 13.247 8.07345Z" stroke="#9F9FA0" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                    <p class="text-sm text-gray-300">81 com.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div :class="{ 'hidden': showContent }" class="absolute bottom-0 left-0 z-10 py-32 lg:py-64 flex items-center justify-center w-full bg-gradient-radial-darker3">
    <a x-on:click.prevent="showContent = true" class="inline-block px-8 py-4 font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Show more</a>
  </div>
</section>

<section x-data="{ toggle: true }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Compare our plans</h2>
      <p class="mb-12 text-white max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div x-on:click="toggle = !toggle" class="relative p-1 max-w-max mx-auto bg-gradient-radial-dark-light rounded-full">
        <input class="opacity-0 absolute top-0 left-0 z-10 w-full h-full" type="checkbox">
        <div class="flex flex-wrap items-center">
          <div class="w-full sm:w-auto">
            <a :class="{'text-black bg-white': toggle, 'text-gray-300': !toggle}" class="block py-5 px-9 text-center bg-white text-black focus:ring-4 focus:ring-white focus:ring-opacity-40 font-medium rounded-full" href="#">Monthly billing</a>
          </div>
          <div class="flex-1">
            <a :class="{'bg-white': !toggle }" class="flex flex-wrap items-center justify-center py-3.5 px-9 text-center rounded-full" href="#">
              <p :class="{'text-black': !toggle, 'text-gray-300': toggle}" class="mr-2.5 text-gray-300 font-medium">Annual billing</p>
              <span class="px-3 py-1.5 text-sm font-medium text-center text-green-400 uppercase border border-green-400 rounded-full">Save 20%</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap items-center -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-8 pt-12 pb-12 h-full bg-gradient-radial-dark overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Basic</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-7 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$10</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$20</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <a class="mb-7 block px-14 py-4 text-white hover:text-black text-center font-medium tracking-2xl border-2 border-white hover:border-green-400 hover:bg-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <p class="mb-4 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative pt-12 pb-20 px-8 h-full bg-gradient-radial-light overflow-hidden rounded-5xl">
          <img class="absolute top-0 left-0 w-full" src="nightsable-assets/images/pricing/shadow-yellow.png" alt="">
          <p class="mb-2 text-lg text-white font-light">Business</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <div class="flex flex-wrap items-center -m-3 mb-3">
            <div class="w-auto p-3">
              <p class="text-white font-medium text-5xl">
                <span :class="{ 'hidden': !toggle }">$25</span>
                <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
                <span :class="{ 'hidden': toggle }" class="hidden">$50</span>
                <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
              </p>
            </div>
            <div class="w-auto p-3">
              <span class="px-3 py-1 text-sm text-green-400 font-medium border border-green-400 rounded-full">-20%</span>
            </div>
          </div>
          <a class="mb-9 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <p class="mb-4 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="px-8 pt-12 pb-12 h-full bg-gradient-radial-dark overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Premium</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-7 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$50</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$100</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <a class="mb-7 block px-14 py-4 text-white hover:text-black text-center font-medium tracking-2xl border-2 border-white hover:border-green-400 hover:bg-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <p class="mb-4 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-50 fixed left-0 bottom-0 w-full pb-10 px-4">
  <div class="flex items-center p-4 px-9 bg-red-500 max-w-max mx-auto rounded-full">
    <a x-on:click.prevent="modal = false" href="#">
      <img class="mr-4" src="nightsable-assets/images/toast/close-circle.svg" alt="">
    </a>
    <span class="text-white">Please check your email to confirm your address befere you can see that</span>
  </div>
</div>

<section class="overflow-hidden">
  <div class="flex items-center gap-4 p-2">
    <a class="text-white font-normal text-opacity-70" href="#">Homepage</a>
    <span>
      <img src="nightsable-assets/images/breadcrumbs/star.svg" alt="">
    </span>
    <a class="text-white font-normal text-opacity-70" href="#">Services</a>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="md:max-w-4xl text-center mx-auto mb-20">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Open positions</h2>
    </div>
    <div class="relative max-w-5xl mx-auto">
      <h3 class="mb-6 text-2xl text-white tracking-2xl">Design (2)</h3>
      <div class="flex flex-wrap -m-2 mb-8">
        <div class="w-full p-2">
          <div class="px-12 py-9 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center justify-between">
              <div class="w-auto p-2">
                <ul class="flex flex-wrap -m-2 mb-2">
                  <li class="flex items-center p-2">
                    <span class="mr-4 text-sm text-gray-300">Miami</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex items-center p-2">
                    <span class="text-sm text-gray-300">Full Time</span>
                  </li>
                </ul>
                <a class="group inline-block" href="#">
                  <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Senior Product Designer</h3>
                </a>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-3">
                  <div class="w-auto p-3"><a class="inline-block py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a></div>
                  <div class="w-auto p-3">
                    <a class="inline-block" href="#">
                      <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.79688 17.4301L13.5019 11.7251C14.1756 11.0513 14.1756 9.94882 13.5019 9.27507L7.79688 3.57007" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full p-2">
          <div class="px-12 py-9 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center justify-between">
              <div class="w-auto p-2">
                <ul class="flex flex-wrap -m-2 mb-2">
                  <li class="flex items-center p-2">
                    <span class="mr-4 text-sm text-gray-300">Miami</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex items-center p-2">
                    <span class="text-sm text-gray-300">Full Time</span>
                  </li>
                </ul>
                <a class="group inline-block" href="#">
                  <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Produt Designer</h3>
                </a>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-3">
                  <div class="w-auto p-3"><a class="inline-block py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a></div>
                  <div class="w-auto p-3">
                    <a class="inline-block" href="#">
                      <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.79688 17.4301L13.5019 11.7251C14.1756 11.0513 14.1756 9.94882 13.5019 9.27507L7.79688 3.57007" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <h3 class="mb-6 text-2xl text-white tracking-2xl">Marketing (2)</h3>
      <div class="flex flex-wrap -m-2">
        <div class="w-full p-2">
          <div class="px-12 py-9 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center justify-between">
              <div class="w-auto p-2">
                <ul class="flex flex-wrap -m-2 mb-2">
                  <li class="flex items-center p-2">
                    <span class="mr-4 text-sm text-gray-300">Miami</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex items-center p-2">
                    <span class="text-sm text-gray-300">Full Time</span>
                  </li>
                </ul>
                <a class="group inline-block" href="#">
                  <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Customer Success Manager</h3>
                </a>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-3">
                  <div class="w-auto p-3"><a class="inline-block py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a></div>
                  <div class="w-auto p-3">
                    <a class="inline-block" href="#">
                      <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.79688 17.4301L13.5019 11.7251C14.1756 11.0513 14.1756 9.94882 13.5019 9.27507L7.79688 3.57007" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full p-2">
          <div class="px-12 py-9 border border-gray-900 rounded-5xl">
            <div class="flex flex-wrap items-center justify-between">
              <div class="w-auto p-2">
                <ul class="flex flex-wrap -m-2 mb-2">
                  <li class="flex items-center p-2">
                    <span class="mr-4 text-sm text-gray-300">Miami</span>
                    <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="#9F9FA0"></path>
                    </svg>
                  </li>
                  <li class="flex items-center p-2">
                    <span class="text-sm text-gray-300">Full Time</span>
                  </li>
                </ul>
                <a class="group inline-block" href="#">
                  <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Product Manager, Instagram Camera</h3>
                </a>
              </div>
              <div class="w-auto p-2">
                <div class="flex flex-wrap items-center -m-3">
                  <div class="w-auto p-3"><a class="inline-block py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Design</a></div>
                  <div class="w-auto p-3">
                    <a class="inline-block" href="#">
                      <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.79688 17.4301L13.5019 11.7251C14.1756 11.0513 14.1756 9.94882 13.5019 9.27507L7.79688 3.57007" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative pt-20 overflow-hidden">
  <img class="absolute top-0 left-0" src="nightsable-assets/images/blog-content/shadow.png" alt="">
  <img class="hidden md:block absolute top-24 right-0" src="nightsable-assets/images/blog-content/lines.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="relative p-16 bg-green-500 border-b border-blueGray-900 rounded-5xl">
      <div class="flex flex-wrap lg:items-center -m-8">
        <div class="w-full md:w-1/2 p-8">
          <img class="relative" src="nightsable-assets/images/blog-content/skyscraper3.png" alt="">
        </div>
        <div class="w-full md:w-1/2 p-8">
          <div class="md:max-w-md">
            <h2 class="font-heading mb-4 text-5xl lg:text-7xl text-black tracking-5xl lg:tracking-7xl">Women in business: an interview with Sarah Townsend</h2>
            <p class="mb-6 text-black">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
            <div class="flex flex-wrap items-center -m-2">
              <div class="w-auto p-2">
                <img src="nightsable-assets/images/blog-content/avatar.png" alt="">
              </div>
              <div class="w-auto p-2">
                <p class="text-sm text-black font-medium tracking-tighter">Wade Warren</p>
              </div>
              <div class="w-auto p-2">
                <svg class="text-black" width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M2.492 3H0.574V0.83H2.492V3Z" fill="currentColor"></path>
                </svg>
              </div>
              <div class="w-auto p-2">
                <p class="text-sm text-black font-medium tracking-tighter">9 min read</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap mt-16 pb-16 md:divide-x md:divide-gray-900 border-b border-gray-900 -m-8">
      <div class="w-full md:w-1/3 lg:w-1/4 md:pr-16 p-8">
        <ul class="mb-12 pb-14 border-b border-blueGray-900">
          <li class="mb-6"><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Introduction</a></li>
          <li class="mb-6"><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Header 1</a></li>
          <li class="mb-6"><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Header 2</a></li>
          <li><a class="font-heading text-2xl text-blueGray-100 hover:text-blueGray-200 tracking-2xl transition duration-300" href="#">Summary</a></li>
        </ul>
        <a class="inline-block mb-8 px-8 py-4 w-full text-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Copy Link</a>
        <div class="flex flex-wrap justify-center -m-2">
          <div class="w-auto p-2">
            <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
              <svg width="10" height="18" viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.59948 3.43344H9.16615V0.78344C8.4076 0.704562 7.64544 0.665619 6.88281 0.666773C4.61615 0.666773 3.06615 2.05011 3.06615 4.58344V6.76677H0.507812V9.73344H3.06615V17.3334H6.13281V9.73344H8.68281L9.06614 6.76677H6.13281V4.87511C6.13281 4.00011 6.36615 3.43344 7.59948 3.43344Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <div class="w-auto p-2">
            <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
              <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.3346 1.83326C16.7083 2.10501 16.0458 2.28465 15.368 2.3666C16.0831 1.93936 16.619 1.26725 16.8763 0.474931C16.2043 0.874983 15.4686 1.15684 14.7013 1.30826C14.1884 0.752074 13.5054 0.381844 12.7595 0.25564C12.0135 0.129436 11.2468 0.254396 10.5795 0.610922C9.91217 0.967448 9.38208 1.53537 9.07234 2.22563C8.76259 2.91588 8.69071 3.68942 8.86797 4.42493C7.50916 4.3562 6.18 4.00239 4.96685 3.38648C3.75369 2.77057 2.68367 1.90634 1.8263 0.84993C1.52558 1.37507 1.36757 1.96978 1.36797 2.57493C1.3669 3.13692 1.50482 3.69044 1.76943 4.18623C2.03405 4.68202 2.41715 5.10469 2.88464 5.4166C2.34128 5.40181 1.80954 5.25601 1.33464 4.9916V5.03326C1.33871 5.82067 1.61463 6.58251 2.11573 7.1899C2.61683 7.7973 3.31235 8.21297 4.08464 8.3666C3.78735 8.45707 3.4787 8.50477 3.16797 8.50826C2.95288 8.50575 2.73832 8.48625 2.5263 8.44993C2.74623 9.12727 3.17182 9.71922 3.74386 10.1434C4.31591 10.5676 5.00595 10.8029 5.71797 10.8166C4.51564 11.7627 3.03121 12.279 1.5013 12.2833C1.22275 12.2842 0.944415 12.2675 0.667969 12.2333C2.22999 13.2418 4.05031 13.7772 5.90964 13.7749C7.19271 13.7883 8.46558 13.5458 9.6539 13.0617C10.8422 12.5775 11.9222 11.8615 12.8306 10.9553C13.7391 10.0492 14.4579 8.97109 14.9451 7.78402C15.4323 6.59695 15.678 5.3247 15.668 4.0416C15.668 3.89993 15.668 3.74993 15.668 3.59993C16.3219 3.11227 16.8859 2.51445 17.3346 1.83326Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
          <div class="w-auto p-2">
            <a class="flex items-center justify-center text-white hover:text-black font-medium tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#" style="width: 60px; height: 60px;">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.4513 3.55008C13.2535 3.55008 13.0602 3.60873 12.8957 3.71861C12.7313 3.82849 12.6031 3.98467 12.5274 4.1674C12.4517 4.35012 12.4319 4.55119 12.4705 4.74517C12.5091 4.93915 12.6043 5.11734 12.7442 5.25719C12.884 5.39704 13.0622 5.49228 13.2562 5.53087C13.4502 5.56945 13.6513 5.54965 13.834 5.47396C14.0167 5.39827 14.1729 5.2701 14.2828 5.10565C14.3927 4.9412 14.4513 4.74786 14.4513 4.55008C14.4513 4.28486 14.3459 4.03051 14.1584 3.84297C13.9709 3.65544 13.7165 3.55008 13.4513 3.55008V3.55008ZM17.2846 5.56675C17.2684 4.87533 17.1389 4.19125 16.9013 3.54175C16.6894 2.98603 16.3596 2.48281 15.9346 2.06675C15.522 1.6396 15.0176 1.3119 14.4596 1.10841C13.8118 0.863549 13.127 0.73109 12.4346 0.716748C11.5513 0.666748 11.268 0.666748 9.0013 0.666748C6.73464 0.666748 6.4513 0.666748 5.56797 0.716748C4.8756 0.73109 4.19075 0.863549 3.54297 1.10841C2.98603 1.31396 2.48208 1.64138 2.06797 2.06675C1.64082 2.4794 1.31312 2.98378 1.10964 3.54175C0.864769 4.18953 0.73231 4.87438 0.717969 5.56675C0.667969 6.45008 0.667969 6.73342 0.667969 9.00008C0.667969 11.2667 0.667969 11.5501 0.717969 12.4334C0.73231 13.1258 0.864769 13.8106 1.10964 14.4584C1.31312 15.0164 1.64082 15.5208 2.06797 15.9334C2.48208 16.3588 2.98603 16.6862 3.54297 16.8917C4.19075 17.1366 4.8756 17.2691 5.56797 17.2834C6.4513 17.3334 6.73464 17.3334 9.0013 17.3334C11.268 17.3334 11.5513 17.3334 12.4346 17.2834C13.127 17.2691 13.8118 17.1366 14.4596 16.8917C15.0176 16.6883 15.522 16.3606 15.9346 15.9334C16.3615 15.5189 16.6916 15.0152 16.9013 14.4584C17.1389 13.8089 17.2684 13.1248 17.2846 12.4334C17.2846 11.5501 17.3346 11.2667 17.3346 9.00008C17.3346 6.73342 17.3346 6.45008 17.2846 5.56675V5.56675ZM15.7846 12.3334C15.7786 12.8624 15.6828 13.3865 15.5013 13.8834C15.3682 14.2461 15.1545 14.5738 14.8763 14.8417C14.606 15.1172 14.279 15.3304 13.918 15.4667C13.4211 15.6482 12.8969 15.744 12.368 15.7501C11.5346 15.7917 11.2263 15.8001 9.03464 15.8001C6.84297 15.8001 6.53464 15.8001 5.7013 15.7501C5.15204 15.7604 4.60513 15.6758 4.08464 15.5001C3.73945 15.3568 3.42743 15.1441 3.16797 14.8751C2.89138 14.6074 2.68034 14.2794 2.5513 13.9167C2.34785 13.4127 2.23501 12.8767 2.21797 12.3334C2.21797 11.5001 2.16797 11.1917 2.16797 9.00008C2.16797 6.80842 2.16797 6.50008 2.21797 5.66675C2.2217 5.12596 2.32043 4.59004 2.50964 4.08341C2.65634 3.73167 2.88152 3.41813 3.16797 3.16675C3.42115 2.88022 3.73404 2.65266 4.08464 2.50008C4.59259 2.31678 5.12797 2.22098 5.66797 2.21675C6.5013 2.21675 6.80964 2.16675 9.0013 2.16675C11.193 2.16675 11.5013 2.16675 12.3346 2.21675C12.8636 2.22282 13.3877 2.31862 13.8846 2.50008C14.2633 2.64063 14.6032 2.86912 14.8763 3.16675C15.1494 3.42273 15.3628 3.73569 15.5013 4.08341C15.6865 4.59086 15.7824 5.12656 15.7846 5.66675C15.8263 6.50008 15.8346 6.80842 15.8346 9.00008C15.8346 11.1917 15.8263 11.5001 15.7846 12.3334ZM9.0013 4.72508C8.15614 4.72673 7.33044 4.97885 6.62851 5.4496C5.92659 5.92034 5.37995 6.58858 5.05766 7.36988C4.73538 8.15117 4.65191 9.01047 4.8178 9.83919C4.98369 10.6679 5.3915 11.4289 5.9897 12.0259C6.5879 12.6229 7.34964 13.0293 8.17869 13.1935C9.00773 13.3578 9.86686 13.2727 10.6475 12.9489C11.4282 12.6251 12.0954 12.0771 12.5647 11.3743C13.0341 10.6714 13.2846 9.84524 13.2846 9.00008C13.2857 8.43767 13.1756 7.88059 12.9607 7.36088C12.7457 6.84117 12.4301 6.36909 12.032 5.97179C11.634 5.57449 11.1613 5.25981 10.6411 5.04586C10.121 4.8319 9.56371 4.72288 9.0013 4.72508V4.72508ZM9.0013 11.7751C8.45246 11.7751 7.91594 11.6123 7.45959 11.3074C7.00325 11.0025 6.64757 10.5691 6.43754 10.062C6.2275 9.55496 6.17255 8.997 6.27962 8.45871C6.3867 7.92041 6.65099 7.42595 7.03908 7.03786C7.42717 6.64977 7.92163 6.38548 8.45993 6.2784C8.99822 6.17133 9.55618 6.22628 10.0632 6.43632C10.5703 6.64635 11.0037 7.00203 11.3086 7.45837C11.6136 7.91472 11.7763 8.45124 11.7763 9.00008C11.7763 9.3645 11.7045 9.72535 11.5651 10.062C11.4256 10.3987 11.2212 10.7046 10.9635 10.9623C10.7058 11.22 10.3999 11.4244 10.0632 11.5638C9.72657 11.7033 9.36572 11.7751 9.0013 11.7751V11.7751Z" fill="currentColor"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full md:flex-1 md:pl-16 p-8">
        <div>
          <div class="border-b border-blueGray-900">
            <h3 class="mb-10 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
          </div>
          <div class="pt-8">
            <h2 class="font-heading mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
            <p class="mb-6 text-lg text-blueGray-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
            <div class="flex flex-wrap mb-9">
              <div class="w-auto p-3">
                <div class="w-0.5 bg-green-400 h-full rounded-md"></div>
              </div>
              <div class="flex-1 mb-5 p-3">
                <h3 class="mb-4 text-2xl text-gray-200 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus.</h3>
                <p class="text-lg text-gray-100">— John Doe, CEO &amp; Founder</p>
              </div>
              <p class="mb-8 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
              <img class="mb-4 w-full" src="nightsable-assets/images/blog-content/header2.png" alt="">
              <p class="text-lg text-blueGray-200">Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</p>
            </div>
            <h2 class="font-heading pl-16 mb-4 text-3xl text-blueGray-50 tracking-3xl">Header 1</h2>
            <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa. Eu dolor aliquet risus gravida nunc at feugiat consequat purus. Non massa enim vitae duis mattis. Vel in ultricies vel fringilla.</h3>
            <h3 class="mb-9 text-2xl text-gray-100 tracking-2xl">Sagittis et eu at elementum, quis in. Proin praesent volutpat egestas sociis sit lorem nunc nunc sit. Eget diam curabitur mi ac. Auctor rutrum lacus malesuada massa ornare et. Vulputate consectetur ac ultrices at diam dui eget fringilla tincidunt. Arcu sit dignissim massa erat cursus vulputate gravida id. Sed quis auctor vulputate hac elementum gravida cursus dis.</h3>
            <ul class="mb-9">
              <li class="text-2xl text-gray-100">1. Lectus id duis vitae porttitor enim gravida morbi.</li>
              <li class="text-2xl text-gray-100">2. Eu turpis posuere semper feugiat volutpat elit, ultrices suspendisse. Auctor vel in vitae placerat.</li>
              <li class="text-2xl text-gray-100">3. Suspendisse maecenas ac donec scelerisque diam sed est duis purus.</li>
            </ul>
            <h3 class="text-2xl text-gray-100 tracking-2xl">Vestibulum placerat magna nulla, sit amet venenatis sapien consequat ut. Cras pulvinar, lorem tristique pharetra finibus, dui erat finibus orci, a vehicula arcu sapien id metus. Quisque quis lorem a sem porttitor feugiat. Etiam quis congue est. Donec fermentum ac libero a pretium. Nulla nisl sem, euismod ut eros vitae, egestas scelerisque enim. <a class="text-green-500 underline" href="#">Vivamus id pharetra massa</a>. Nulla aliquet erat elit, a gravida dui efficitur vel. Sed pulvinar diam sed neque ullamcorper semper. Nulla elementum arcu lacus, quis porta nisl posuere varius. Quisque tempus libero sed urna posuere hendrerit.</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="pt-16 pb-20 lg:pb-40">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">The latest news</span>
      <h2 class="font-heading mb-16 text-5xl lg:text-7xl xl:text-8xl text-white tracking-5xl lg:tracking-7xl xl:tracking-8xl">From the blog</h2>
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/cash.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="mb-8 overflow-hidden rounded-3xl">
            <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog-content/skyscraper2.png" alt="">
          </div>
          <div class="flex flex-wrap items-center -m-2 mb-4">
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">Blog Post</span>
            </div>
            <div class="w-auto p-2">
              <svg width="3" height="3" viewBox="0 0 3 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.492 2.5H0.574V0.33H2.492V2.5Z" fill="white"></path>
              </svg>
            </div>
            <div class="w-auto p-2">
              <span class="text-sm text-white font-medium tracking-tighter">9 min read</span>
            </div>
          </div>
          <a class="group block" href="#">
            <h3 class="font-heading mb-4 text-3xl text-white tracking-3xl hover:underline">Women in business</h3>
          </a>
          <p class="mb-6 text-white text-opacity-60">Nightsable is a strategic branding agency focused on brand creation</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Corporate Gifting</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Sales</span>
            </div>
            <div class="w-auto p-1.5">
              <span class="inline-block px-6 py-3.5 text-sm text-white font-medium bg-blueGray-900 hover:bg-blueGray-900 bg-opacity-30 hover:bg-opacity-40 rounded-full transition duration-300">Marketing</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12">
  <div class="container px-4 mx-auto">
    <div class="relative pt-20 px-4 bg-gray-900 bg-opacity-20 overflow-hidden rounded-6xl">
      <div class="text-center md:max-w-xl mx-auto">
        <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
        <h2 class="font-heading mb-6 text-7xl text-white tracking-8xl">Get a Nightsable App</h2>
        <p class="mb-8 text-gray-300">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that</p>
        <div class="flex flex-wrap justify-center -m-2.5">
          <div class="w-auto p-2.5">
            <a href="#">
              <img src="nightsable-assets/images/application-section/app-store-black.png" alt="">
            </a>
          </div>
          <div class="w-auto p-2.5">
            <a href="#">
              <img src="nightsable-assets/images/application-section/google-play-black.png" alt="">
            </a>
          </div>
        </div>
        <img class="relative z-10" src="nightsable-assets/images/application-section/phone2.png" alt="">
        <img class="absolute -bottom-24 right-0" src="nightsable-assets/images/application-section/lines2.png" alt="">
      </div>
    </div>
  </div>
</section>

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-40 fixed top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-30">
  <div class="p-4 max-w-xl w-full">
    <div class="relative p-6 py-11 bg-blueGray-900 bg-opacity-30 rounded-5xl">
      <h3 class="mb-4 text-3xl font-medium text-white text-center tracking-3xl max-w-xs mx-auto">Update payment method</h3>
      <p class="mb-10 text-white text-center max-w-sm mx-auto">Update your credit card details</p>
      <div class="flex flex-wrap -m-2 mb-4">
        <div class="w-full p-2">
          <div class="relative border border-gray-900 focus-within:border-white overflow-hidden rounded-2xl">
            <img class="absolute right-6 top-1/2 transform -translate-y-1/2" src="nightsable-assets/logos/brands/mastercard.svg" alt="">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Card number">
          </div>
        </div>
        <div class="w-full p-2">
          <div class="flex flex-wrap -m-2">
            <div class="w-full md:w-1/2 p-2">
              <div class="relative border border-gray-900 focus-within:border-white overflow-hidden rounded-2xl">
                <input class="px-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="password" placeholder="Expiration">
              </div>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="relative border border-gray-900 focus-within:border-white overflow-hidden rounded-2xl">
                <img class="absolute right-6 top-1/2 transform -translate-y-1/2" src="nightsable-assets/images/modals/info.svg" alt="">
                <input class="px-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="password" placeholder="CVV">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -m-3">
        <span></span>
        <div class="w-full p-3"><a class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-white bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Confirm</a></div>
        <div class="w-full p-3"><a class="block text-white text-center font-medium tracking-2xl" href="#">Cancel</a></div>
      </div>
      <a x-on:click.prevent="modal = false" class="absolute top-6 right-6" href="#">
        <img src="nightsable-assets/images/modals/close-icon.png">
      </a>
    </div>
  </div>
</section>