Shuffle Components in Nightsable library

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="py-14 bg-gradient-radial-dark 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>
        <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>
</section>

<section class="pt-20 pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="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">Let`s work together!</h2>
      <p class="mb-20 text-gray-300 md:max-w-lg mx-auto">Let us help you become even greater at what you do.
Fill out the following form and we will get back to you in the next 24 hours</p>
      <h3 class="mb-6 text-xl text-white font-medium">Services</h3>
      <div class="flex flex-wrap justify-center -m-1.5 mb-10">
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">Branding</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">UI / UX</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">Animation</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">3D Design</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">Content</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">Strategy &amp; consulting</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">User research</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">Other</a></div>
      </div>
      <h3 class="mb-6 text-xl text-white font-medium">Your budget</h3>
      <div class="flex flex-wrap justify-center -m-1.5 mb-12">
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">2K - 10K</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">10K - 50K</a></div>
        <div class="w-auto p-1.5"><a class="inline-block py-3 px-6 font-medium text-white border-2 hover:border-green-400 border-gray-900 rounded-full transition duration-300" href="#">More than 50K</a></div>
      </div>
      <h3 class="mb-6 text-xl text-white font-medium">Details</h3>
      <div class="flex flex-wrap -m-2 mb-2">
        <div class="w-full md:w-1/2 p-2">
          <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>
        <div class="w-full md:w-1/2 p-2">
          <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="Last Name">
          </div>
        </div>
      </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="#">Submit</a>
      <p class="text-sm text-gray-300">Your information will be used accordane with our Privacy Policy. You may opf out at any time</p>
    </div>
  </div>
</section>

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-3xl 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-tighter-xl">What people are saying</h2>
    </div>
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <div class="px-9 py-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <h3 class="mb-6 text-2xl text-white tracking-tighter leading-tight">“GTIS Partners is a leading real estate investment firm in the Americas, headquartered in New York with offices in São Paulo, San Francisco, Los Angeles, Atlanta, Charlotte, Phoenix”</h3>
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <img src="nightsable-assets/images/testimonials/avatar-small.png" alt="">
            </div>
            <div class="flex-1 p-3">
              <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
              <span class="inline-block text-sm text-white">CEO, Since Industry</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <div class="px-9 py-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <h3 class="mb-6 text-2xl text-white tracking-tighter leading-tight">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly</h3>
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <img src="nightsable-assets/images/testimonials/avatar-small2.png" alt="">
            </div>
            <div class="flex-1 p-3">
              <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
              <span class="inline-block text-sm text-white">CEO, Since Industry</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <div class="px-9 py-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <h3 class="mb-6 text-2xl text-white tracking-tighter leading-tight">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 5 BC, making it over 2000 years</h3>
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <img src="nightsable-assets/images/testimonials/avatar-small3.png" alt="">
            </div>
            <div class="flex-1 p-3">
              <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
              <span class="inline-block text-sm text-white">CEO, Since Industry</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <div class="px-9 py-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <h3 class="mb-6 text-2xl text-white tracking-tighter leading-tight">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words</h3>
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <img src="nightsable-assets/images/testimonials/avatar-small4.png" alt="">
            </div>
            <div class="flex-1 p-3">
              <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
              <span class="inline-block text-sm text-white">CEO, Since Industry</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <div class="px-9 py-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <h3 class="mb-6 text-2xl text-white tracking-tighter leading-tight">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of de Finibus Bonorum et Malorum The Extremes of Good and Evil</h3>
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <img src="nightsable-assets/images/testimonials/avatar-small5.png" alt="">
            </div>
            <div class="flex-1 p-3">
              <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
              <span class="inline-block text-sm text-white">CEO, Since Industry</span>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <div class="px-9 py-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <h3 class="mb-6 text-2xl text-white tracking-tighter leading-tight">Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always.</h3>
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <img src="nightsable-assets/images/testimonials/avatar-small6.png" alt="">
            </div>
            <div class="flex-1 p-3">
              <h4 class="text-white font-medium tracking-tighter">Wade Warren</h4>
              <span class="inline-block text-sm text-white">CEO, Since Industry</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="fixed bottom-0 left-0 z-50 w-full">
  <div class="py-5 bg-black">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center -m-4">
        <div class="w-full md:flex-1 p-4">
          <p class="text-sm text-white">We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.</p>
        </div>
        <div class="w-full md:w-auto p-4">
          <div class="flex flex-wrap items-center md:justify-end -m-4">
            <div class="w-auto p-4"><a x-on:click.prevent="modal = false" class="inline-block px-8 py-4 text-sm font-medium tracking-tighter 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="#">Accept</a></div>
            <div class="w-auto p-4"><a class="inline-block text-white underline font-medium tracking-tighter transition duration-300" href="#">Privacy Policy</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5 lg:py-8">
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center">
          <div class="w-auto hidden lg:block">
            <ul class="flex items-center mr-12">
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
              <li class="mr-12 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
              <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
            </ul>
          </div>
          <div class="w-auto lg:hidden">
            <button x-on:click="mobileNavOpen = !mobileNavOpen" class="relative z-10 inline-block">
              <svg class="text-green-500" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="56" height="56" rx="28" fill="currentColor"></rect>
                <path d="M37 32H19M37 24H19" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="w-auto hidden lg:block p-2">
        <button x-on:click="mobileNavOpen = !mobileNavOpen">
          <svg width="57" height="16" viewBox="0 0 57 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="57" height="2" rx="1" fill="white"></rect><rect y="14" width="57" height="2" rx="1" fill="white"></rect></svg>
        </button>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-60"></div>
    <nav class="relative z-10 px-9 pt-8 h-full bg-black overflow-y-auto">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -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">
              <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block text-white">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col justify-center py-16 w-full">
          <ul>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Home</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">About us</a></li>
            <li class="mb-8 text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Wallet</a></li>
            <li class="text-white font-medium hover:text-opacity-90 tracking-tighter"><a href="#">Blog</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full pb-8"><a class="inline-block px-8 py-4 text-center 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="#">Get in touch</a></div>
      </div>
    </nav>
  </div>
</section>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-16 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">FAQ</h2>
    </div>
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <h3 class="mb-4 text-2xl text-white tracking-2xl">What are the limits for money transfers from the United States?</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>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <h3 class="mb-4 text-2xl text-white tracking-2xl">Is it safe to send money with Revolut?</h3>
        <p class="text-white text-opacity-60">Yes. Banking services are provided by Metropolitan Commercial Bank, Member FDIC.</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <h3 class="mb-4 text-2xl text-white tracking-2xl">How can I make an international transfer from the United States?</h3>
        <p class="text-white text-opacity-60">Enter your recipient's details. You'll usually need the recipient’s full name and their bank account number and bank code. Some payment methods and destination countries may require additional information.</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <h3 class="mb-4 text-2xl text-white tracking-2xl">How long does it take to send money abroad from the United States?</h3>
        <p class="text-white text-opacity-60">Different payment methods affect your transfer delivery time. Payments to other Revolut users and card payments are instant.</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <h3 class="mb-4 text-2xl text-white tracking-2xl">Where can I transfer money to from the United States?</h3>
        <p class="text-white text-opacity-60">Transfers to the following countries are not supported: Afghanistan, Angola, Burkina Faso, Burundi, Cambodia, Central African Republic, Congo (Brazzaville), Congo (Kinshasa), Cuba, Eritrea, Ethiopia, Guinea, Guinea-Bissau, Guyana, Haiti, Iran...</p>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-5">
        <h3 class="mb-4 text-2xl text-white tracking-2xl">How can I make an international transfer from the United States?</h3>
        <p class="text-white text-opacity-60">Enter your recipient's details. You'll usually need the recipient’s full name and their bank account number and bank code.</p>
      </div>
    </div>
  </div>
</section>

<section class="py-16 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -m-8">
      <div class="w-auto p-8">
        <img src="nightsable-assets/logos/logo.svg" alt="">
      </div>
      <div class="w-auto p-8">
        <ul class="flex flex-wrap -m-5">
          <li class="p-5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Contact</a></li>
          <li class="p-5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Blog</a></li>
          <li class="p-5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Our Story</a></li>
          <li class="p-5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Careers</a></li>
          <li class="p-5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Privacy</a></li>
          <li class="p-5"><a class="inline-block text-lg font-medium text-gray-300 hover:text-white transition duration-300" href="#">Terms</a></li>
        </ul>
      </div>
      <div class="w-auto p-8">
        <div class="relative border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
          <select class="appearance-none pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-50 outline-none bg-transparent" type="text" placeholder="Company">
            <option hidden="">English</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>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Check our stats</span>
          <h2 class="font-heading mb-8 text-6xl md:text-7xl text-white tracking-tighter-xl">Making credit history with nightcard</h2>
          <p class="mb-8 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.</p>
          <a class="inline-block text-white hover:text-opacity-80 font-medium underline transition duration-500" href="#">Read more</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="mx-auto max-w-lg md:mr-0">
          <div class="flex flex-wrap -m-4">
            <div class="w-1/2 p-4">
              <div class="flex flex-wrap">
                <div class="mb-8 w-full">
                  <img class="w-full" src="nightsable-assets/images/abouts/img2.png" alt="">
                </div>
                <div class="w-full">
                  <img class="w-full" src="nightsable-assets/images/abouts/img4.png" alt="">
                </div>
              </div>
            </div>
            <div class="w-1/2 p-4">
              <div class="flex flex-wrap mt-24">
                <div class="mb-8 w-full">
                  <img class="w-full" src="nightsable-assets/images/abouts/img3.png" alt="">
                </div>
                <div class="w-full">
                  <img class="w-full" src="nightsable-assets/images/abouts/img.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl 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">Our Team</h2>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="flex flex-nowrap -m-4">
      <div class="flex-shrink-0 p-4">
        <img class="mb-8 mx-auto" src="nightsable-assets/images/team/team.png" alt="">
        <span class="inline-block mb-1.5 text-gray-300">CEO at Nightsable Studio</span>
        <h3 class="mb-4 text-3xl text-white tracking-3xl">Guy Hawkins</h3>
        <div class="flex flex-wrap -m-3">
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/twitter.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/linkedin.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="flex-shrink-0 p-4">
        <img class="mb-8 mx-auto" src="nightsable-assets/images/team/team2.png" alt="">
        <span class="inline-block mb-1.5 text-gray-300">CEO at Nightsable Studio</span>
        <h3 class="mb-4 text-3xl text-white tracking-3xl">Jane Cooper</h3>
        <div class="flex flex-wrap -m-3">
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/twitter.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/linkedin.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="flex-shrink-0 p-4">
        <img class="mb-8 mx-auto" src="nightsable-assets/images/team/team3.png" alt="">
        <span class="inline-block mb-1.5 text-gray-300">CEO at Nightsable Studio</span>
        <h3 class="mb-4 text-3xl text-white tracking-3xl">Brooklyn Simmons</h3>
        <div class="flex flex-wrap -m-3">
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/twitter.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/linkedin.svg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="flex-shrink-0 p-4">
        <img class="mb-8 mx-auto" src="nightsable-assets/images/team/team.png" alt="">
        <span class="inline-block mb-1.5 text-gray-300">CEO at Nightsable Studio</span>
        <h3 class="mb-4 text-3xl text-white tracking-3xl">Guy Hawkins</h3>
        <div class="flex flex-wrap -m-3">
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/twitter.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-3">
            <a href="#">
              <img src="nightsable-assets/images/team/linkedin.svg" alt="">
            </a>
          </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-4xl 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">Built for teams large and small</h2>
    </div>
    <div class="md:max-w-4xl 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 class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/intel-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/lenovo-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/sonder-white.png" alt="">
        </div>
        <div class="w-auto p-6">
          <img src="nightsable-assets/images/logo-clouds/sendle-white.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-11 pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <a class="inline-block mb-20" href="#">
      <img src="nightsable-assets/logos/logo.svg" alt="">
    </a>
    <div class="max-w-md mx-auto">
      <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">Dont have an account? Sign up</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>
</section>

<section class="py-24">
  <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-20 text-7xl lg:text-8xl text-white tracking-8xl mx-auto">Why Nightsable Card?</h2>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 p-4">
        <div class="relative p-12 h-full bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <h3 class="mb-6 text-7xl lg:text-8xl xl:text-9xl text-white tracking-4xl">$1.5B+</h3>
            <p class="mb-20 text-white text-opacity-60">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</p>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium underline">Learn more</span>
              <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <img class="absolute right-0 bottom-0" src="nightsable-assets/images/stats/card-blur.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="relative p-12 h-full bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <h3 class="mb-6 text-7xl lg:text-8xl xl:text-9xl text-white tracking-4xl">100+</h3>
            <p class="mb-20 text-white text-opacity-60">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</p>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium underline">Learn more</span>
              <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <img class="absolute right-0 bottom-0" src="nightsable-assets/images/stats/card-blur.png" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="relative p-12 h-full bg-gradient-radial-dark overflow-hidden border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="relative z-10">
            <h3 class="mb-6 text-7xl lg:text-8xl xl:text-9xl text-white tracking-4xl">150+</h3>
            <p class="mb-20 text-white text-opacity-60">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</p>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium underline">Learn more</span>
              <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
          </div>
          <img class="absolute right-0 bottom-0" src="nightsable-assets/images/stats/card-blur.png" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-xl 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-tighter-xl">Features</h2>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/3 p-4">
        <div class="px-10 pt-14 pb-12 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <a class="inline-block mb-6 px-5 py-3 text-sm text-white hover:text-black font-medium hover:bg-green-500 tracking-tight border-2 border-white hover:border-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-200" href="#">Get in touch</a>
          <h3 class="mb-6 text-4xl text-white tracking-tighter-xl">Proof of Transfer</h3>
          <p class="mb-40 text-white">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="inline-block" href="#">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24.1689 2L2.11268 24" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M24.1689 22.1732V2H3.94413" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="px-10 pt-14 pb-12 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <a class="inline-block mb-6 px-5 py-3 text-sm text-white hover:text-black font-medium hover:bg-green-500 tracking-tight border-2 border-white hover:border-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-200" href="#">Get in touch</a>
          <h3 class="mb-6 text-4xl text-white tracking-tighter-xl">Proof of Transfer</h3>
          <p class="mb-40 text-white">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="inline-block" href="#">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24.1689 2L2.11268 24" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M24.1689 22.1732V2H3.94413" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-4">
        <div class="px-10 pt-14 pb-12 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <a class="inline-block mb-6 px-5 py-3 text-sm text-white hover:text-black font-medium hover:bg-green-500 tracking-tight border-2 border-white hover:border-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-200" href="#">Get in touch</a>
          <h3 class="mb-6 text-4xl text-white tracking-tighter-xl">Proof of Transfer</h3>
          <p class="mb-40 text-white">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
          <a class="inline-block" href="#">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24.1689 2L2.11268 24" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M24.1689 22.1732V2H3.94413" stroke="white" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-11 pb-36 overflow-hidden">
  <div class="container px-4 mx-auto">
    <a class="inline-block mb-20" href="#">
      <img src="nightsable-assets/logos/logo.svg" alt="">
    </a>
    <div class="max-w-md mx-auto">
      <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">Now create your account!</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-300 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>
</section>

<section x-data="{ showContent: false }" class="relative py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-12 md:max-w-xl 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">FAQ</h2>
    </div>
    <div class="flex flex-wrap -m-4 mb-16">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-10 pt-14 pb-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-auto">
              <h3 class="mb-6 text-2xl text-white tracking-2xl">What are the limits for money transfers from the United States?</h3>
              <p class="mb-16 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>
            <div class="w-auto">
              <a class="group inline-flex items-center" href="#">
                <span class="mr-3.5 text-white underline">Learn more</span>
                <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-10 pt-14 pb-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-auto">
              <h3 class="mb-6 text-2xl text-white tracking-2xl">Is it safe to send money with Revolut?
</h3>
              <p class="mb-16 text-white text-opacity-60">Yes. Banking services are provided by Metropolitan Commercial Bank, Member FDIC.</p>
            </div>
            <div class="w-auto">
              <a class="group inline-flex items-center" href="#">
                <span class="mr-3.5 text-white underline">Learn more</span>
                <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-10 pt-14 pb-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-auto">
              <h3 class="mb-6 text-2xl text-white tracking-2xl">How can I make an international transfer from the United States?</h3>
              <p class="mb-16 text-white text-opacity-60">Enter your recipient's details. You'll usually need the recipient’s full name and their bank account number and bank code. Some payment methods and destination countries may require additional information.</p>
            </div>
            <div class="w-auto">
              <a class="group inline-flex items-center" href="#">
                <span class="mr-3.5 text-white underline">Learn more</span>
                <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-10 pt-14 pb-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-auto">
              <h3 class="mb-6 text-2xl text-white tracking-2xl">Transfer Limits Explained</h3>
              <p class="mb-16 text-white text-opacity-60">Discover the details on money transfer limits from the United States. In most cases, there are no limits, but certain currencies may have restrictions imposed by our payment partners. Always find and review the specific transfer limits in the Revolut app before initiating any transaction.</p>
            </div>
            <div class="w-auto">
              <a class="group inline-flex items-center" href="#">
                <span class="mr-3.5 text-white underline">Learn more</span>
                <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-10 pt-14 pb-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-auto">
              <h3 class="mb-6 text-2xl text-white tracking-2xl">Security Measures for Money Transfers</h3>
              <p class="mb-16 text-white text-opacity-60">Ensure the safety of your funds when sending money with Revolut. Our banking services are provided by Metropolitan Commercial Bank, a Member FDIC. Rest easy knowing that your transactions are protected by established financial institutions.</p>
            </div>
            <div class="w-auto">
              <a class="group inline-flex items-center" href="#">
                <span class="mr-3.5 text-white underline">Learn more</span>
                <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div :class="{ 'hidden': !showContent }" class="hidden w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="px-10 pt-14 pb-10 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-3xl">
          <div class="flex flex-col justify-between h-full">
            <div class="w-auto">
              <h3 class="mb-6 text-2xl text-white tracking-2xl">Making International Transfers: Step-by-Step</h3>
              <p class="mb-16 text-white text-opacity-60">Learn how to effortlessly make international transfers from the United States with Revolut. Follow simple steps like entering the recipient's full name, bank account number, and bank code. Note that some payment methods and specific destination countries may require additional information for a smooth transaction.</p>
            </div>
            <div class="w-auto">
              <a class="group inline-flex items-center" href="#">
                <span class="mr-3.5 text-white underline">Learn more</span>
                <svg class="transform group-hover:rotate-90 transition duration-300" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.5 0.75L1 11.25" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  <path d="M11.5 10.3781V0.75H1.87187" stroke="white" stroke-width="1.43182" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="block px-8 py-4 max-w-max mx-auto font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 border-2 border-green-400 rounded-full transition duration-300" href="#">See full FAQ</a>
  </div>
</section>

<section class="relative pt-20 pb-20 lg:pb-40 overflow-hidden">
  <img class="absolute top-0 left-0" src="nightsable-assets/images/blog-content/shadow.png" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative z-10 py-16 bg-green-500 rounded-t-5xl">
      <div class="md:max-w-md px-4 text-center mx-auto">
        <h2 class="font-heading mb-4 text-3xl text-black tracking-3xl">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 justify-center 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 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="white"></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>
    <img class="hidden md:block absolute top-24 right-0" src="nightsable-assets/images/blog-content/lines.png" alt="">
    <div class="relative px-16">
      <div class="absolute top-0 left-0 w-full h-1/2 bg-green-500 rounded-b-5xl"></div>
      <img class="relative z-10 mx-auto border border-black border-opacity-30 rounded-5xl" src="nightsable-assets/images/blog-content/header.png" alt="">
    </div>
    <div class="border-b border-blueGray-900">
      <div class="max-w-3xl pt-16 mx-auto">
        <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 pb-16">
          <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" 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 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="mb-12 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 class="flex flex-wrap justify-center -m-2">
            <div class="w-auto p-2"><a class="inline-block px-8 py-4 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>
            <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>
    </div>
    <div class="pt-16">
      <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>

<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-black max-w-max mx-auto rounded-full">
    <span class="mr-4 text-white">Your settings have been saved</span>
    <a x-on:click.prevent="modal = false" href="#">
      <img src="nightsable-assets/images/toast/close-icon.png" alt="">
    </a>
  </div>
</div>

<section :class="{ 'hidden': !modal }" x-data="{ 
    search: '', 
    modal: true, 
    filtersFollowers(input){ 
      return input.toLowerCase().startsWith(this.search.toLowerCase())
    } 
  }" class="z-40 fixed top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-30">
  <div class="relative p-4 max-w-3xl w-full">
    <div class="relative bg-blueGray-900 bg-opacity-30 overflow-hidden rounded-5xl">
      <div class="px-11 pt-10 pb-8">
        <div class="flex flex-wrap items-end -m-2 mb-5">
          <div class="w-auto p-2">
            <h3 class="text-3xl text-white font-medium tracking-3xl">Followers</h3>
          </div>
          <div class="w-auto p-2">
            <p class="text-gray-300 text-opacity-50 font-medium tracking-2xl">(13022 members)</p>
          </div>
        </div>
        <div class="relative border border-gray-900 focus-within:border-white overflow-hidden rounded-2xl">
          <img class="absolute top-1/2 left-6 transform -translate-y-1/2" src="nightsable-assets/images/modals/search.svg" alt="">
          <input x-model="search" class="pl-14 pr-6 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="password" placeholder="Search contacts">
        </div>
      </div>
      <div class="flex flex-col overflow-y-auto" style="height: 448px;">
        <div x-show="filtersFollowers('Devon Lane')" class="w-full">
          <div class="py-4 px-10 border-b border-t border-gray-900">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/modals/avatar1.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h3 class="text-white font-medium">Devon Lane</h3>
                    <p class="text-gray-300">Amet minim mollit non deserunt ullamco</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="max-w-max md:ml-auto">
                  <a class="group inline-flex justify-center items-center w-28 h-10 px-5 py-2 border-2 border-white hover:border-green-400 hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">
                    <div class="inline-block mr-1">
                      <svg class="text-white group-hover:text-body" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.5 12H18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12.5 18V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-sm text-white group-hover:text-body font-medium tracking-2xl">Follow</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div x-show="filtersFollowers('Courtney Henry')" class="w-full">
          <div class="py-4 px-10 border-b border-gray-900">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/modals/avatar2.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h3 class="text-white font-medium">Courtney Henry</h3>
                    <p class="text-gray-300">Amet minim mollit non deserunt ullamco</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="max-w-max md:ml-auto">
                  <a class="group inline-flex justify-center items-center w-28 h-10 px-5 py-2 border-2 border-white hover:border-green-400 hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">
                    <div class="inline-block mr-1">
                      <svg class="text-white group-hover:text-body" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.5 12H18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12.5 18V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-sm text-white group-hover:text-body font-medium tracking-2xl">Follow</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div x-show="filtersFollowers('Ralph Edwards')" class="w-full">
          <div class="py-4 px-10 border-b border-gray-900">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/modals/avatar3.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h3 class="text-white font-medium">Ralph Edwards</h3>
                    <p class="text-gray-300">Amet minim mollit non deserunt ullamco</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="max-w-max md:ml-auto">
                  <a class="inline-flex justify-center items-center w-28 h-10 p-2 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="#">
                    <span class="text-sm font-medium tracking-2xl">Following</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div x-show="filtersFollowers('Esther Howard')" class="w-full">
          <div class="py-4 px-10 border-b border-gray-900">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/modals/avatar4.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h3 class="text-white font-medium">Esther Howard</h3>
                    <p class="text-gray-300">Amet minim mollit non deserunt ullamco</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="max-w-max md:ml-auto">
                  <a class="group inline-flex justify-center items-center w-28 h-10 px-5 py-2 border-2 border-white hover:border-green-400 hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">
                    <div class="inline-block mr-1">
                      <svg class="text-white group-hover:text-body" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.5 12H18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12.5 18V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-sm text-white group-hover:text-body font-medium tracking-2xl">Follow</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div x-show="filtersFollowers('Eleanor Pena')" class="w-full">
          <div class="py-4 px-10 border-b border-gray-900">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/modals/avatar5.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h3 class="text-white font-medium">Eleanor Pena</h3>
                    <p class="text-gray-300">Amet minim mollit non deserunt ullamco</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="max-w-max md:ml-auto">
                  <a class="group inline-flex justify-center items-center w-28 h-10 px-5 py-2 border-2 border-white hover:border-green-400 hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">
                    <div class="inline-block mr-1">
                      <svg class="text-white group-hover:text-body" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.5 12H18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12.5 18V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-sm text-white group-hover:text-body font-medium tracking-2xl">Follow</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div x-show="filtersFollowers('Cameron Williamson')" class="w-full">
          <div class="py-4 px-10 border-b border-gray-900">
            <div class="flex flex-wrap justify-between -m-2">
              <div class="w-auto p-2">
                <div class="flex flex-wrap -m-3">
                  <div class="w-auto p-3">
                    <img src="nightsable-assets/images/modals/avatar2.png" alt="">
                  </div>
                  <div class="w-auto p-3">
                    <h3 class="text-white font-medium">Cameron Williamson</h3>
                    <p class="text-gray-300">Amet minim mollit non deserunt ullamco</p>
                  </div>
                </div>
              </div>
              <div class="w-auto p-2">
                <div class="max-w-max md:ml-auto">
                  <a class="group inline-flex justify-center items-center w-28 h-10 px-5 py-2 border-2 border-white hover:border-green-400 hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">
                    <div class="inline-block mr-1">
                      <svg class="text-white group-hover:text-body" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.5 12H18.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        <path d="M12.5 18V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                      </svg>
                    </div>
                    <span class="text-sm text-white group-hover:text-body font-medium tracking-2xl">Follow</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a x-on:click.prevent="modal = false" class="absolute top-10 right-10" href="#">
      <img src="nightsable-assets/images/modals/close-icon.png">
    </a>
  </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-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4 md:mb-20">
        <div class="mb-8 overflow-hidden rounded-3xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/cash4.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">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Marketing</div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4 md:mb-20">
        <div class="mb-8 overflow-hidden rounded-3xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/hand4.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">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Marketing</div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4 md:mb-20">
        <div class="mb-8 overflow-hidden rounded-3xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/skyscraper4.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">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Marketing</div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4 md:mb-20 lg:mb-0">
        <div class="mb-8 overflow-hidden rounded-3xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/cash4.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">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Marketing</div>
          </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/hand4.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">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Marketing</div>
          </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/skyscraper4.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">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Building our platform</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">On-Demand</div>
          </div>
          <div class="w-auto p-1.5">
            <div class="py-3.5 px-6 text-sm text-white hover:text-black font-medium tracking-tighter bg-blueGray-900 bg-opacity-30 hover:bg-green-400 rounded-full transition duration 300">Marketing</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ toggle: true }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-12 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-gray-300 max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap justify-center -m-4">
        <div class="flex flex-wrap items-center w-auto p-4">
          <p class="text-white mr-8">Billed monthly</p>
          <div x-on:click="toggle = !toggle" class="relative p-1 w-14 h-8 bg-gray-900 rounded-full">
            <div class="relative">
              <input class="opacity-0 absolute z-10 h-8 w-14 top-0 left-0" type="checkbox">
              <div :class="{'left-1/2': !toggle}" class="absolute left-0 transform w-6 h-6 bg-white rounded-full transition-all duration-500"></div>
            </div>
          </div>
        </div>
        <div class="flex flex-wrap items-center w-auto p-4">
          <p class="text-gray-300 mr-3.5">Billed yearly</p>
          <span class="px-3 py-1 text-sm text-green-400 font-medium uppercase border border-green-400 rounded-full">Save 20%</span>
        </div>
      </div>
    </div>
    <div class="w-full overflow-x-auto overflow-y-hidden border border-gray-900 rounded-5xl">
      <div class="flex">
        <div class="flex-1">
          <div class="flex flex-wrap">
            <div class="w-full border-b border-r border-gray-900" style="height: 240px;"></div>
            <div class="flex items-end w-full h-24 px-8 py-6 border-b border-r border-gray-900">
              <p class="text-xl min-w-max font-medium text-white">Dropbox core features</p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Storage</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Users</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Best-in-class sync technology</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Anytime, anywhere access</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Easy and secure sharing</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">256-bit AES and SSL/TLS encryption</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-end w-full h-24 px-8 py-6 border-b border-r border-gray-900">
              <p class="text-xl min-w-max font-medium text-white">Dropbox core features</p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Shared link controls</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">External sharing controls and reporting</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Alerts and notifications</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="mr-3.5 min-w-max text-white">Ransomware detection and recovery</p>
              <img src="nightsable-assets/images/pricing/info.png" alt="">
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex flex-wrap">
            <div class="w-full border-b border-r border-gray-900" style="height: 240px;">
              <div class="p-12">
                <h3 class="mb-3 min-w-max text-xl text-white font-medium">Basic</h3>
                <p class="mb-7 min-w-max 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="inline-block min-w-max px-16 py-2.5 text-center font-light 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="#">Buy now</a>
              </div>
            </div>
            <div class="w-full h-24 px-8 py-6 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="min-w-max text-white mx-auto">3,000 gb</p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="min-w-max text-white mx-auto">1 user</p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900"></div>
            <div class="flex items-end w-full h-24 px-8 py-6 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900"></div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex flex-wrap">
            <div class="w-full bg-gray-900 bg-opacity-30 border-b border-r border-gray-900" style="height: 240px;">
              <div class="p-12">
                <h3 class="mb-3 min-w-max text-xl text-white font-medium">Business</h3>
                <p class="mb-7 min-w-max text-white font-medium text-5xl">
                  <span :class="{ 'hidden': !toggle }">$20</span>
                  <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
                  <span :class="{ 'hidden': toggle }" class="hidden">$40</span>
                  <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
                </p>
                <a class="inline-block min-w-max px-16 py-2.5 text-center font-light 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="#">Buy now</a>
              </div>
            </div>
            <div class="w-full bg-gray-900 bg-opacity-30 h-24 px-8 py-6 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="min-w-max text-white mx-auto">3,000 gb</p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="min-w-max text-white mx-auto">3+ users</p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-end w-full bg-gray-900 bg-opacity-30 h-24 px-8 py-6 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full bg-gray-900 bg-opacity-30 h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
          </div>
        </div>
        <div class="flex-1">
          <div class="flex flex-wrap">
            <div class="w-full border-b border-gray-900" style="height: 240px;">
              <div class="p-12">
                <h3 class="mb-3 min-w-max text-xl text-white font-medium">Premium</h3>
                <p class="mb-7 min-w-max 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="inline-block min-w-max px-16 py-2.5 text-center font-light 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="#">Buy now</a>
              </div>
            </div>
            <div class="w-full h-24 px-8 py-6 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="min-w-max text-white mx-auto">3,000 gb</p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="min-w-max text-white mx-auto">3+ users</p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-end w-full h-24 px-8 py-6 border-b border-r border-gray-900"></div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
            <div class="flex items-center w-full h-16 px-8 py-5 border-b border-r border-gray-900">
              <p class="flex items-center justify-center min-w-max mx-auto w-5 h-5 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/pricing/check.svg" alt="">
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>