Glassmorphism Contact Form Card

<div
  class="sm:p-8 overflow-hidden group bg-black/60 ring-white/10 ring-1 rounded-3xl pt-6 pr-6 pb-6 pl-6 relative shadow-[0_8px_32px_rgba(0,0,0,0.5)] backdrop-blur-md">
  <!-- Subtle glow effect -->
  <div
    class="absolute -top-24 -right-24 w-48 h-48 bg-indigo-500/20 rounded-full blur-[60px] pointer-events-none group-hover:bg-indigo-500/30 transition-colors duration-700">
  </div>

  <div class="relative z-10 flex items-center justify-between mb-8">
    <div class="">
      <p class="text-[10px] font-mono uppercase tracking-widest text-zinc-500 mb-1">Get in touch</p>
      <h3 class="text-2xl font-display font-semibold tracking-tight text-white">Send a message</h3>
    </div>
    <div
      class="h-10 w-10 rounded-xl bg-white/5 border border-white/10 text-white flex items-center justify-center shadow-inner">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-message-square">
        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
      </svg>
    </div>
  </div>

  <form action="#" method="POST" class="relative z-10 space-y-5">
    <div class="">
      <label for="ct-name" class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Your name <span class="text-rose-500">*</span></label>
      <input id="ct-name" name="name" type="text" required="" placeholder="Jane Doe" class="w-full px-4 py-3 text-sm rounded-xl bg-white/5 border border-white/10 focus:border-white/20 focus:ring-1 focus:ring-white/20 outline-none text-white placeholder:text-zinc-600 transition-all">
    </div>
    <div class="">
      <label for="ct-email" class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Email address <span class="text-rose-500">*</span></label>
      <div class="relative">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-mail text-zinc-500 absolute left-4 top-1/2 -translate-y-1/2">
          <rect width="20" height="16" x="2" y="4" rx="2" class=""></rect>
          <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" class=""></path>
        </svg>
        <input id="ct-email" name="email" type="email" required="" placeholder="jane@company.com" class="w-full pl-11 pr-4 py-3 text-sm rounded-xl bg-white/5 border border-white/10 focus:border-white/20 focus:ring-1 focus:ring-white/20 outline-none text-white placeholder:text-zinc-600 transition-all">
      </div>
    </div>
    <div class="">
      <label for="ct-msg" class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">How can we help?</label>
      <textarea id="ct-msg" name="message" rows="4" placeholder="Tell us about your recruiting needs..." class="w-full px-4 py-3 text-sm rounded-xl bg-white/5 border border-white/10 focus:border-white/20 focus:ring-1 focus:ring-white/20 outline-none text-white placeholder:text-zinc-600 transition-all resize-none"></textarea>
    </div>
    <button type="submit" class="group inline-flex hover:bg-zinc-200 transition-all duration-200 text-sm font-semibold text-black bg-white w-full rounded-xl pt-3.5 pr-4 pb-3.5 pl-4 shadow-[0_0_20px_rgba(255,255,255,0.1)] items-center justify-center">
                Start Conversation
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 transition-transform group-hover:translate-x-1"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </button>
    <p class="text-[10px] text-zinc-600 text-center">Secure 256-bit encrypted transmission.</p>
  </form>
</div>