Contact Components in Nightsable library

<section class="py-20 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="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 mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Work with Nightsable Team Exchange as a creative partner, we`ll reach out to you soon!</h2>
      <p class="mb-20 text-gray-300">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="flex flex-wrap -m-2 mb-10">
        <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 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="E-mail">
          </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="Company">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-2">
          <div class="relative mb-2 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-300 outline-none bg-transparent" type="text" placeholder="Company">
              <option hidden="">Location</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 class="flex flex-wrap justify-center max-w-xs mx-auto mb-6">
        <div class="w-full"><a class="block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Submit</a></div>
      </div>
      <p class="text-sm text-gray-300 max-w-xs mx-auto">Your information will be used accordane with our Privacy Policy. You may opf out at any time</p>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container">
    <div class="mw-5xl mx-auto mb-16 text-center"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h2 class="font-heading mb-8" style="letter-spacing: -0.1rem;">Work with Nightsable Team Exchange as a creative partner, we`ll reach out to you soon!</h2><span class="text-secondary-light mb-0">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</span>
    </div>
    <div class="mw-md mw-lg-4xl mx-auto">
      <form action="">
        <div class="row mb-14">
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="text" placeholder="First Name">
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="text" placeholder="Last Name">
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="email" placeholder="E-mail">
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <input class="form-control bg-transparent" type="text" placeholder="Company">
          </div>
          <div class="col-12 col-lg-6">
            <select class="form-select bg-transparent" name="" id="">
              <option value="1">Location</option>
              <option value="2">USA</option>
              <option value="3">Germany</option>
            </select>
          </div>
        </div>
        <div class="text-center">
          <button class="btn btn-primary mb-6 w-100 mw-xs fw-medium" type="submit">Sign up</button>
          <p class="mw-sm mx-auto mb-0"><span class="text-secondary-light">Your information will be used accordane with our</span><a class="btn ms-1 p-0 text-light text-decoration-underline" href="#"> Privacy Policy.</a><span class="text-secondary-light">You may opf out at any time</span></p>
        </div>
      </form>
    </div>
  </div>
</section>