Responsive Tailwind Footer with Newsletter & Social Links

<footer class="sm:px-8 pt-16 pb-12">
      <div class="relative overflow-hidden bg-white border border-black/5 rounded-3xl">
        <div class="relative z-10 sm:p-8 md:p-12 pt-8 pr-4 pb-8 pl-4">
          <div class="grid grid-cols-1 lg:grid-cols-4 gap-12 pb-12">
            <div class="lg:col-span-4">
              <div class="flex gap-3 mb-6 items-center">
                <a href="#" class="inline-flex items-center justify-center bg-center mix-blend-screen w-[160px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/cabcb3dd-d3a2-48fd-9b67-55ddd5de69ce_320w.jpg)] bg-cover rounded invert"></a>
              </div>
              <p class="text-xl text-black/70 font-geist max-w-3xl mb-10">Creating lasting change together. Join our mission to transform communities worldwide through compassionate action and sustainable support.</p>

              <div class="sm:p-8 md:p-12 bg-gradient-to-b from-neutral-800 to-neutral-950 border-black/5 border rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-xl">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                  <div class="space-y-6">
                    <div class="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20 px-3 py-2 text-sm font-geist">
                      <span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
                      Impact updates, free
                    </div>
                    <h4 class="text-2xl font-semibold text-white tracking-tight font-geist">Stay connected</h4>
                    <ul class="space-y-3 text-base text-white/70">
                      <li class="flex items-start gap-3 font-geist">
                        <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="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-1 flex-shrink-0"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                        Monthly impact reports and stories.
                      </li>
                      <li class="flex items-start gap-3 font-geist">
                        <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="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-1 flex-shrink-0"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                        Volunteer opportunities near you.
                      </li>
                      <li class="flex items-start gap-3 font-geist">
                        <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="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-1 flex-shrink-0"><path d="M20 6 9 17l-5-5" class=""></path></svg>
                        No spam, unsubscribe anytime.
                      </li>
                    </ul>
                    <form class="flex gap-3 pt-2">
                      <input type="email" required="" placeholder="your.email@example.com" class="flex-1 h-12 px-4 rounded-xl border border-white/20 bg-black/20 text-sm placeholder-white/40 text-white outline-none focus:ring-2 focus:ring-white/20 focus:border-white/40 backdrop-blur">
                      <button class="inline-flex items-center gap-2 h-12 px-5 rounded-xl ring-1 ring-white/20 text-sm text-white bg-black/20 hover:bg-white hover:text-black transition font-geist">
                        Join
                        
                      </button>
                    </form>
                  </div>
                  <div class="lg:col-span-2 grid grid-cols-2 sm:grid-cols-3 gap-8">
                    <div class="">
                      <h5 class="text-white/80 text-xs uppercase tracking-wider font-medium font-geist mb-4">Programs</h5>
                      <ul class="space-y-3 text-base text-white/70">
                        <li class=""><a class="hover:text-white transition font-geist" href="#health">HealthReach</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#education">LearnForward</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#water">WaterBridge</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#shelter">SafeHaven</a></li>
                      </ul>
                    </div>
                    <div class="">
                      <h5 class="text-white/80 text-xs uppercase tracking-wider font-medium font-geist mb-4">Get Involved</h5>
                      <ul class="space-y-3 text-base text-white/70">
                        <li class=""><a class="hover:text-white transition font-geist" href="#donate">Donate Now</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#volunteer">Volunteer</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#partner">Partner</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#fundraise">Fundraise</a></li>
                      </ul>
                    </div>
                    <div class="">
                      <h5 class="text-white/80 text-xs uppercase tracking-wider font-medium font-geist mb-4">About</h5>
                      <ul class="space-y-3 text-base text-white/70">
                        <li class=""><a class="hover:text-white transition font-geist" href="#mission">Our Mission</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#impact">Impact Stories</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#transparency">Transparency</a></li>
                        <li class=""><a class="hover:text-white transition font-geist" href="#careers">Careers</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

              <div class="mt-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
                <div class="flex items-center gap-4 text-base text-black/60">
                  <span class="font-geist">© 2025 Sense</span>
                  <span class="hidden sm:inline text-black/20 font-geist">|</span>
                  <a href="#privacy" class="hover:text-black transition font-geist">Privacy</a>
                  <span class="text-black/20 font-geist">/</span>
                  <a href="#terms" class="hover:text-black transition font-geist">Terms</a>
                </div>
                <div class="flex items-center gap-3">
                  <a aria-label="Instagram" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-black/5 text-black/70 hover:text-black hover:bg-black/10 transition" href="https://instagram.com" target="_blank" rel="noreferrer">
                    <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="instagram" class="lucide lucide-instagram w-5 h-5"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
                  </a>
                  <a aria-label="Twitter/X" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-black/5 text-black/70 hover:text-black hover:bg-black/10 transition" href="https://twitter.com" target="_blank" rel="noreferrer">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class=""><path d="M12.6 1.7h2.1l-4.6 5.2 5.4 7.4h-4.2L8.9 9.8l-3.9 4.5H2.9l4.9-5.6L2.6 1.7h4.3l3 4.1 2.7-3.1z" class=""></path></svg>
                  </a>
                  <a aria-label="YouTube" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-black/5 text-black/70 hover:text-black hover:bg-black/10 transition" href="https://youtube.com" target="_blank" rel="noreferrer">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class=""><path d="M23.5 6.2a4 4 0 0 0-2.8-2.8C18.8 3 12 3 12 3s-6.8 0-8.7.4A4 4 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a4 4 0 0 0 2.8 2.8C5.2 21 12 21 12 21s6.8 0 8.7-.4a4 4 0 0 0 2.8-2.8c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.5v-7L16 12z" class=""></path></svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>