Responsive Tailwind Footer with Links & Subscribe Form

<section class="relative border-white/5 border-t pt-14 pb-8">
  <div class="pointer-events-none absolute inset-0 -z-10">
    <div class="absolute left-1/2 -translate-x-1/2 -top-10 w-[90vw] max-w-6xl h-56 bg-[radial-gradient(ellipse_at_top,rgba(99,102,241,0.35)_0%,transparent_65%)]"></div>
  </div>

  <div class="max-w-7xl mx-auto px-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
      <!-- Brand + note -->
      <div class="">
        <div class="flex items-center gap-3">
          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="paintbrush" class="lucide lucide-paintbrush w-[24px] h-[24px]" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(255, 255, 255);"><path d="m14.622 17.897-10.68-2.913" class=""></path><path d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z" class=""></path><path d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15" class=""></path></svg>
          <span class="text-xl font-semibold tracking-tight font-manrope">Fluxora</span>
        </div>
        <p class="mt-4 text-sm text-white/70 font-sans">
          Made remotely with <span class="text-violet-300">♥</span> and passion —
          <span class="text-white/90">Fluxora Studio</span>.
        </p>
      </div>

      <!-- Template Pages -->
      <div class="">
        <h4 class="text-lg sm:text-xl font-semibold tracking-tight font-manrope">Template Pages</h4>
        <ul class="mt-4 space-y-2 text-sm">
          <li class=""><a href="#" class="text-white/70 hover:text-white transition-colors font-sans">Home</a></li>
          <li class=""><a href="#" class="text-white/70 hover:text-white transition-colors font-sans">Work</a></li>
          <li class=""><a href="#" class="text-white/70 hover:text-white transition-colors font-sans">Studio</a></li>
          <li><a href="#" class="text-white/70 hover:text-white transition-colors font-sans">Pricing</a></li>
          <li><a href="#" class="text-white/70 hover:text-white transition-colors font-sans">Contact</a></li>
        </ul>
      </div>

      <!-- Social -->
      <div class="">
        <h4 class="text-lg sm:text-xl font-semibold tracking-tight font-manrope">Social</h4>
        <ul class="mt-4 space-y-2 text-sm">
          <li class=""><a href="#" class="inline-flex items-center gap-2 text-white/70 hover:text-white transition-colors font-sans"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 3 18 18" class=""></path><path d="M17.5 6.5 6 18" class=""></path><path d="M3 8h8" class=""></path><path d="M13 16h8" class=""></path></svg>Twitter (X)</a></li>
          <li class=""><a href="#" class="inline-flex items-center gap-2 text-white/70 hover:text-white transition-colors font-sans"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" class=""></rect><path d="M7 17c1.5-1 3.5-1 5 0s3.5 1 5 0" class=""></path><path d="M8 7h.01M16 7h.01" class=""></path></svg>Instagram</a></li>
          <li><a href="#" class="inline-flex items-center gap-2 text-white/70 hover:text-white transition-colors font-sans"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 8s.5-2 2-3 4-1 8-1 6 0 8 1 2 3 2 3v8s-.5 2-2 3-4 1-8 1-6 0-8-1-2-3-2-3z" class=""></path><path d="m10 9 5 3-5 3z" class=""></path></svg>Youtube</a></li>
          <li><a href="#" class="inline-flex items-center gap-2 text-white/70 hover:text-white transition-colors font-sans"><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white/50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 12.5 8 20l4-2 4 2-2-7.5" class=""></path><path d="M12 12a5 5 0 1 0-5-5" class=""></path></svg>Framer</a></li>
        </ul>
      </div>

      <!-- Subscribe -->
      <div class="">
        <h4 class="text-lg sm:text-xl font-semibold tracking-tight font-manrope">Subscribe Form</h4>
        <form class="mt-4" action="#" method="post">
          <label for="newsletter-email" class="sr-only">Email address</label>
          <div class="flex items-center gap-2">
            <div class="relative flex-1">
              <input id="newsletter-email" type="email" required="" placeholder="Enter your email..." class="w-full rounded-full bg-white/[0.04] text-white placeholder-white/50 ring-1 ring-white/15 focus:ring-2 focus:ring-violet-500/60 outline-none px-4 py-2.5 text-sm font-sans transition">
              <span class="pointer-events-none absolute inset-0 rounded-full shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)]"></span>
            </div>
            <a href="#" class="hidden sm:inline-flex items-center gap-2 hover:from-indigo-500 hover:to-indigo-700 transition-colors shadow-cyan-500/25 text-sm font-medium text-white bg-gradient-to-l from-indigo-600 to-indigo-800 rounded-full pt-2 pr-4 pb-2 pl-4 shadow-md" style="">Subscribe<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right w-4 h-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg></a>
          </div>
          <p class="mt-2 text-xs text-white/50 font-sans">No spam. Unsubscribe any time.</p>
        </form>
      </div>
    </div>

    <!-- Bottom bar -->
    <div class="mt-10 border-t border-white/10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm">
      <p class="text-white/60 font-sans">© 2025 Fluxora Design</p>
      <div class="flex items-center gap-6">
        <a href="#" class="text-white/60 hover:text-white transition-colors font-sans">Terms &amp; Conditions</a>
        <span class="hidden sm:inline-block w-px h-4 bg-white/10"></span>
        <a href="#" class="text-white/60 hover:text-white transition-colors font-sans">Privacy Policy</a>
      </div>
    </div>
  </div>

  <span class="hidden md:block absolute right-6 bottom-6 h-4 w-16 rounded-full border border-white/10 bg-white/5"></span>
</section>