Glass Morphic Contact Form

<div class="w-full max-w-2xl">
  <form class="relative flex flex-col sm:flex-row items-center p-1.5
    rounded-[2rem] bg-white/5 border border-white/10
    backdrop-blur-xl hover:bg-white/10 transition-colors
    duration-300 shadow-2xl shadow-black/20">
    <div class="w-full relative flex items-center px-2">
      <iconify-icon icon="lucide:user" class="absolute left-5 text-stone-400" width="18"></iconify-icon>
      <input type="text" placeholder="Seu nome" class="w-full bg-transparent border-none text-white
        placeholder:text-stone-400 text-sm font-medium py-4 pl-10
        pr-4 focus:ring-0 focus:outline-none" />
    </div>
    <div class="hidden sm:block w-px h-8 bg-white/10 mx-2"></div>
    <div class="block sm:hidden w-full h-px bg-white/10 my-1"></div>
    <div class="w-full relative flex items-center px-2">
      <iconify-icon icon="lucide:message-circle" class="absolute left-5 text-stone-400" width="18"></iconify-icon>
      <input type="tel" placeholder="Seu WhatsApp" class="w-full bg-transparent border-none text-white
        placeholder:text-stone-400 text-sm font-medium py-4 pl-10
        pr-4 focus:ring-0 focus:outline-none" />
    </div>
    <button type="button" class="w-full sm:w-auto mt-2 sm:mt-0 px-8 py-3.5 rounded-[1.5rem]
      bg-stone-100 text-stone-900 text-sm font-semibold
      hover:bg-white hover:scale-[1.02] active:scale-[0.98]
      transition-all whitespace-nowrap shadow-lg">Conhecer Projeto</button>
  </form>
  <p class="mt-4 text-xs text-stone-500 font-medium tracking-wide uppercase text-center">Plantas de 250m² a 400m² • Frente Mar</p>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
</div>