Tailwind CSS Components

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative px-7 pt-10 pb-8 bg-gray-900 bg-opacity-30 max-w-lg mx-auto rounded-5xl">
      <div class="text-center mx-auto">
        <a class="mb-9 flex justify-center" href="#">
          <img src="nightsable-assets/logos/logo.svg" alt="">
        </a>
        <h3 class="mb-10 text-3xl font-medium text-white tracking-5xl">Log in to your account</h3>
        <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>

<section x-data="{ mobileNavOpen: false }">
  <div class="container px-4 mx-auto">
    <div class="flex items-center justify-between py-5">
      <div class="w-auto">
        <div class="flex flex-wrap items-center -m-10">
          <div class="w-auto p-10">
            <a class="relative z-10 inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto hidden lg:block p-10">
            <ul class="flex items-center">
              <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>
      </div>
      <div class="w-auto">
        <div class="flex flex-wrap items-center -m-2">
          <div class="w-auto hidden lg:block p-2">
            <div class="inline-block"><a class="inline-block px-8 py-4 text-white hover:text-black tracking-tighter hover:bg-green-400 border-2 border-white focus:border-green-400 focus:border-opacity-40 hover:border-green-400 focus:ring-4 focus:ring-green-400 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Log in</a></div>

<section class="pt-20 pb-24 bg-blueGray-950">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
      <h2 class="font-heading mb-6 text-7xl lg:text-8xl text-white tracking-8xl md:max-w-md mx-auto">Protecting you and your money</h2>
      <p class="mb-20 text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/cards/bg-image1.png" alt="">
          <div class="absolute bottom-0 left-0 w-full bg-gradient-card p-8">
            <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
            <a class="group inline-block max-w-sm" href="#">
              <h3 class="mb-4 text-3xl text-white tracking-3xl hover:underline">Safeguarded with leading banks</h3>
            </a>
            <a class="group inline-flex items-center" href="#">
              <span class="mr-3.5 text-white font-medium">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>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="relative px-7 pt-10 pb-8 bg-gray-900 bg-opacity-30 max-w-lg mx-auto rounded-5xl">
      <div class="text-center mx-auto">
        <img class="mb-9 mx-auto" src="nightsable-assets/logos/logo.svg" alt="">
        <h3 class="mb-10 text-3xl font-medium text-white tracking-5xl">Lets Get Started</h3>
        <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>

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 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-8 text-7xl lg:text-8xl text-white tracking-8xl mx-auto">Why Nightsable Card?</h2>
      <p class="text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap divide-x divide-solid divide-gray-900 -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="text-center">
          <h3 class="mb-8 text-7xl lg:text-8xl xl:text-10xl text-green-400 tracking-8xl">80%</h3>
          <p class="mb-6 text-2xl text-white tracking-2xl w-56 mx-auto">feel lack of companionship</p>
          <p class="text-sm text-white">sometimes or often</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="text-center">
          <h3 class="mb-8 text-7xl lg:text-8xl xl:text-10xl text-green-400 tracking-8xl">70%</h3>
          <p class="mb-6 text-2xl text-white tracking-2xl w-24 mx-auto">feel left out</p>
          <p class="text-sm text-white">sometimes or often</p>
        </div>
      </div>
    </div>
  </div>

<section x-data="{ showContent: false }" class="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-7xl lg:tracking-8xl">Our Team</h2>
    </div>
    <div class="flex flex-wrap -m-4 mb-10">
      <div class="w-full md:w-1/2 p-4">
        <div class="h-full py-7 px-12 border border-gray-900 border-opacity-30 rounded-5xl">
          <div class="flex flex-wrap justify-between items-center -m-2">
            <div class="w-auto p-2">
              <div class="flex flex-wrap items-center -m-4">
                <div class="w-auto p-4">
                  <img src="nightsable-assets/images/team/avatar-circle.png" alt="">
                </div>
                <div class="w-auto p-4">
                  <p class="mb-1.5 text-sm text-gray-300">CEO at Nightsable Studio</p>
                  <h3 class="text-3xl text-white tracking-3xl">Jacob Jones</h3>
                </div>
              </div>
            </div>
            <div class="w-auto p-2">
              <div class="flex flex-wrap -m-4">
                <div class="w-auto p-4">

<section x-data="{ showContent: false }" 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="max-w-4xl mx-auto">
      <div class="flex flex-wrap -m-1.5">
        <div class="w-full p-1.5">
          <a x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="block px-12 py-8 bg-gradient-radial-dark rounded-5xl" href="#">
            <div class="flex flex-wrap -m-2">
              <div class="flex-1 p-2">
                <h3 class="text-2xl text-white tracking-2xl">What are the limits for money transfers from the United States?</h3>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                  <p class="text-lg text-gray-500 mt-3">Pretium ac auctor quis urna orci feugiat. Vulputate tellus velit tellus orci auctor vel nulla facilisi ut. Ante nunc risus viverra vivamus. Eros amet at lectus ac ac nibh dignissim.</p>
                </div>
              </div>
              <div class="w-auto p-2">
                <div :class="{ 'hidden': accordion }" class="relative top-1.5">
                  <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.56969 7.79634L9.27469 13.5013C9.94844 14.1751 11.0509 14.1751 11.7247 13.5013L17.4297 7.79634" stroke="white" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <div :class="{ 'hidden': !accordion }" class="hidden relative top-1.5 transform rotate-180">

<section x-data="{ showContent: false }" 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">Open positions</h2>
    </div>
    <div class="flex flex-wrap -m-4 mb-10">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative h-full text-center px-11 py-14 overflow-hidden border border-gray-900 rounded-5xl">
          <a class="inline-block mb-4 py-3 px-4 text-xs text-green-400 hover:text-black font-medium hover:bg-green-400 uppercase border-2 border-green-400 rounded-full transition duration-300" href="#">Marketing</a>
          <a class="group block mb-40 max-w-xs mx-auto" href="#">
            <h3 class="text-3xl text-white tracking-3xl group-hover:underline">Product Manager, Instagram Camera</h3>
          </a>
          <ul class="relative z-10 flex flex-wrap justify-center -m-2">
            <li class="flex flex-wrap items-center p-2">
              <span class="mr-4 text-white">Miami</span>
              <svg width="2" height="3" viewBox="0 0 2 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.806 2.5H0.574V0.554H1.806V2.5Z" fill="white"></path>
              </svg>
            </li>
            <li class="flex flex-wrap items-center p-2">
              <span class="text-white">Full Time</span>
            </li>
          </ul>

<section x-data="{ showContent: false }" 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-10 mb-10">
      <div class="w-full md:w-1/2 p-10">
        <div class="mb-8 overflow-hidden rounded-5xl">
          <img class="w-full transform hover:scale-125 transition duration-1000" src="nightsable-assets/images/blog/skyscraper5.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>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl 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">
        <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>

<section x-data="{ showContent: false }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 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-8 text-7xl lg:text-8xl text-white tracking-8xl mx-auto">Why Nightsable Card?</h2>
      <p class="text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <h3 class="mb-8 text-7xl lg:text-8xl xl:text-10xl text-green-400 tracking-8xl">80%</h3>
        <p class="mb-16 lg:mb-32 text-2xl text-white tracking-2xl">People believe the content they find and create on TikTok is more unique compared to other platforms they interact with.</p>
        <a :class="{ 'hidden': showContent }" x-on:click.prevent="showContent = true" class="inline-block px-8 py-4 font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">See more</a>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="flex flex-wrap -m-6">
          <div class="w-full p-6">
            <div class="md:max-w-md">
              <h3 class="mb-8 text-6xl text-green-400 tracking-6xl">80%</h3>
              <p class="pb-12 text-white">In 2020, Nightsable Card was the most downloaded app. It only continues to grow in popularity around the world when compared to other social apps.</p>
              <div class="h-px w-1/3 bg-gray-900"></div>
            </div>
          </div>
          <div class="w-full p-6">
            <div class="md:max-w-md">

<section class="overflow-hidden">
  <div class="flex flex-wrap -m-8">
    <div class="w-full md:w-1/2 p-8">
      <div class="px-4 pt-10 md:pb-40 max-w-lg mx-auto">
        <div class="flex flex-wrap items-center justify-between mb-36 -m-2">
          <div class="w-auto p-2">
            <a class="inline-block" href="#">
              <img src="nightsable-assets/logos/logo.svg" alt="">
            </a>
          </div>
          <div class="w-auto p-2">
            <p class="text-sm text-gray-300">
              <span>Alreade have account?</span>
              <a class="underline" href="#">Sign in</a>
            </p>
          </div>
        </div>
        <div class="text-center mx-auto">
          <h3 class="mb-4 text-5xl text-white tracking-5xl">Let`s Get Started</h3>
          <p class="mb-10 text-gray-300">Good to have you back!</p>
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">
            <input class="pl-6 pr-16 py-4 text-gray-300 w-full placeholder-gray-300 outline-none bg-transparent" type="text" placeholder="Full name">
          </div>
          <div class="mb-2 border border-gray-900 focus-within:border-white overflow-hidden rounded-3xl">

<section class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -m-8 mb-16">
      <div class="w-full md:w-1/2 lg:w-1/5 p-8">
        <h3 class="mb-6 text-gray-300 font-medium">Product</h3>
        <ul>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Chat by Chat AI</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Chat AI Reviews</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Chat AI vs Human</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Chat AI API</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Pricing</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Alternatives</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Write in 29+ Languages</a></li>
          <li><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Use Free AI Tools</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/5 p-8">
        <h3 class="mb-6 text-gray-300 font-medium">Company</h3>
        <ul>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Blog</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Press</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Careers</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Community</a></li>
          <li class="mb-2.5"><a class="inline-block text-lg font-medium text-white hover:text-opacity-60 transition duration-300" href="#">Creator Program</a></li>

<section x-data="{ toggle: true }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Compare our plans</h2>
      <p class="text-gray-300 max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap -m-4 mb-10">
      <div class="w-full md:w-1/2 p-4">
        <div x-on:click="toggle = true" :class="{'bg-gradient-radial-light': toggle}" class="px-8 pt-10 pb-14 h-full bg-gradient-radial-light border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <div class="flex flex-wrap items-center -m-2">
            <div class="w-full md:w-1/2 p-2">
              <p class="mb-4 text-xl text-white font-medium">Annual</p>
              <p class="mb-7 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
              <p class="min-w-max text-5xl text-white font-medium">
                <span>$9.99</span>
                <span class="ml-3.5 text-base font-medium text-gray-300">/ month</span>
              </p>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="max-w-max md:ml-auto">
                <input type="radio" placeholder="">
              </div>
            </div>

<section x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="z-40 fixed top-0 left-0 flex items-center justify-center w-full h-full bg-black bg-opacity-30">
  <div class="p-4 max-w-3xl w-full">
    <div class="relative bg-blueGray-900 bg-opacity-30 overflow-hidden rounded-5xl">
      <div class="p-10">
        <div class="text-left">
          <h3 class="mb-4 text-3xl text-white font-medium tracking-3xl">Select plan</h3>
          <p class="mb-8 text-white">Update your credit card details</p>
        </div>
        <div class="flex flex-wrap -m-2 mb-8">
          <div class="w-full md:w-1/2 p-2">
            <div class="p-8 h-full bg-gradient-radial-dark border border-gray-900 border-opacity-30 rounded-5xl">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto">
                  <p class="mb-2 text-sm text-white font-medium">Team+</p>
                </div>
                <div class="w-auto">
                  <input type="radio" placeholder="">
                </div>
              </div>
              <p class="mb-4 text-white font-medium text-4xl">
                <span>$10</span>
                <span class="text-xs font-medium text-gray-300">/ month</span>
              </p>
              <ul>

<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 mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Get in touch with us</h2>
      <p class="mb-12 text-gray-300 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>
    </div>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -m-4">
        <div class="w-full md:w-1/2 p-4">
          <div class="flex flex-col h-full p-3 bg-gradient-radial-dark rounded-5xl">
            <img class="w-full rounded-3xl" src="nightsable-assets/images/contact/image2.png" alt="">
            <div class="flex flex-col justify-between p-8 flex-1">
              <div class="w-auto">
                <p class="mb-3 text-2xl text-white font-medium tracking-2xl">San Francisco</p>
                <p class="mb-6 text-gray-300">50 Beale St.San Francisco, CA, United States94105</p>
                <a class="mb-4 inline-block text-white text-lg font-medium underline" href="#">contact@sanfrancisco.co</a>
                <p class="mb-8 text-white text-lg font-medium underline">(684) 555-0102</p>
              </div>
              <div class="w-auto">
                <a class="group flex items-center justify-center px-14 py-4 border-2 border-green-400 bg-transparent hover:bg-green-500 focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">
                  <div class="mr-2.5 inline-block">
                    <img src="nightsable-assets/images/contact/sent.svg" alt="">
                  </div>

<section class="py-20 bg-blueGray-950 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-6 text-7xl lg:text-8xl xl:text-9xl text-white tracking-9xl md:max-w-xl mx-auto">Download and get a Nightsable App</h2>
      <p class="mb-8 text-lg text-gray-300 md:max-w-2xl mx-auto">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that</p>
      <a class="inline-block px-8 py-4 font-medium tracking-tighter bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Get a free Nightsable App</a>
    </div>
  </div>
</section>

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-20">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">NightsableCard</span>
      <h2 class="font-heading mb-6 text-7xl lg:text-8xl text-white tracking-8xl md:max-w-md mx-auto">Protecting you and your money</h2>
      <p class="text-gray-300 md:max-w-md mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full md:w-1/2 p-5">
        <div class="p-12 lg:p-16 border border-gray-900 rounded-5xl">
          <h2 class="font-heading mb-6 text-5xl text-white tracking-5xl">Safeguarded with leading banks</h2>
          <p class="mb-24 lg:mb-56 text-lg 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>
          <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>
      </div>
      <div class="w-full md:w-1/2 p-5">
        <div class="p-12 lg:p-16 border border-gray-900 rounded-5xl">
          <h2 class="font-heading mb-6 text-5xl text-white tracking-5xl">Safeguarded with leading banks</h2>

<section class="py-20 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-7xl border border-gray-900 mx-auto">
      <div class="flex flex-wrap">
        <div class="flex items-center justify-center w-full md:w-1/2 lg:w-1/5 border-b md:border-r border-gray-900" style="height: 246px;">
          <img src="nightsable-assets/images/logo-clouds/rbs-white.png" alt="">
        </div>
        <div class="flex items-center justify-center w-full md:w-1/2 lg:w-1/5 border-b lg:border-r border-gray-900" style="height: 246px;">
          <img src="nightsable-assets/images/logo-clouds/nine-white.png" alt="">
        </div>
        <div class="flex items-center justify-center w-full md:w-1/2 lg:w-1/5 border-b md:border-r border-gray-900" style="height: 246px;">
          <img src="nightsable-assets/images/logo-clouds/drift-white.png" alt="">
        </div>
        <div class="flex items-center justify-center w-full md:w-1/2 lg:w-1/5 border-b lg:border-r border-gray-900" style="height: 246px;">
          <img src="nightsable-assets/images/logo-clouds/seek-white.png" alt="">
        </div>
        <div class="flex items-center justify-center w-full md:w-1/2 lg:w-1/5 border-b md:border-r lg:border-r-0 border-gray-900" style="height: 246px;">
          <img src="nightsable-assets/images/logo-clouds/deloitte-white.png" alt="">
        </div>
        <div class="flex items-center justify-center w-full md:w-1/2 lg:w-1/5 border-b lg:border-b-0 lg:border-r border-gray-900" style="height: 246px;">

<section class="overflow-hidden">
  <div class="flex items-center gap-4 p-2">
    <a class="text-white font-normal uppercase text-opacity-70 text-sm" href="#">Homepage</a>
    <span>
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M12.8334 8.23334L9.00841 4.40834C8.85228 4.25313 8.64107 4.16602 8.42091 4.16602C8.20076 4.16602 7.98955 4.25313 7.83341 4.40834C7.75531 4.48581 7.69331 4.57798 7.651 4.67953C7.6087 4.78108 7.58691 4.89 7.58691 5.00001C7.58691 5.11002 7.6087 5.21894 7.651 5.32049C7.69331 5.42204 7.75531 5.51421 7.83341 5.59168L11.6667 9.40834C11.7449 9.48581 11.8068 9.57798 11.8492 9.67953C11.8915 9.78108 11.9132 9.89 11.9132 10C11.9132 10.11 11.8915 10.2189 11.8492 10.3205C11.8068 10.422 11.7449 10.5142 11.6667 10.5917L7.83341 14.4083C7.67649 14.5642 7.5879 14.7759 7.58712 14.9971C7.58633 15.2182 7.67343 15.4306 7.82925 15.5875C7.98506 15.7444 8.19683 15.833 8.41797 15.8338C8.6391 15.8346 8.85149 15.7475 9.00841 15.5917L12.8334 11.7667C13.3016 11.2979 13.5645 10.6625 13.5645 10C13.5645 9.33751 13.3016 8.70209 12.8334 8.23334Z" fill="white"></path>
      </svg>
    </span>
    <a class="text-white font-normal uppercase text-opacity-70 text-sm" href="#">Services</a>
  </div>
</section>