Responsive Tailwind Footer with Newsletter Subscription

<div class="w-full sm:p-8 text-white bg-neutral-900 rounded-3xl pt-6 pr-6 pb-6 pl-6 max-w-6xl">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Brand -->
    <div class="flex flex-col justify-between">
      <h3 class="text-5xl sm:text-6xl md:text-7xl font-light tracking-tight" style="">SUZY LIU</h3>
      <div class="mt-6 space-y-1">
        <p class="text-sm text-white/70" style="">(510) 895–6500</p>
        <p class="text-2xl sm:text-3xl font-light tracking-tight" style="">hello@suzystudio.com</p>
      </div>
    </div>

    <!-- Subscribe -->
    <div class="">
      <h4 class="text-3xl font-light tracking-tight" style="">Stay connected</h4>
      <p class="mt-2 text-sm text-white/70" style="">Join the newsletter to receive updates on new work and journal
        posts.</p>
      <form class="mt-5">
        <div class="flex items-center gap-3 border-b border-white/20 pb-2">
          <input type="email" placeholder="E‑mail" class="flex-1 bg-transparent placeholder-white/60 text-white text-sm focus:outline-none">
          <button type="submit" class="inline-flex items-center justify-center h-9 w-9 rounded-full bg-white text-neutral-900 hover:bg-neutral-100 transition">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
                    </button>
        </div>
      </form>
    </div>

    <!-- Links -->
    <div class="grid grid-cols-2 gap-8">
      <ul class="space-y-2">
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">About</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Projects</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Blog</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Contact</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Privacy
            Policy</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Terms of
            Service</a></li>
      </ul>
      <ul class="space-y-2">
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Twitter</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Behance</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Instagram</a>
        </li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">Dribbble</a></li>
        <li><a href="#" class="text-sm text-white hover:text-white/80 font-medium transition" style="">en</a></li>
      </ul>
    </div>
  </div>

  <!-- Bottom Bar -->
  <div class="mt-8 pt-6 border-t border-white/10 grid grid-cols-1 sm:grid-cols-3 gap-4 items-center">
    <p class="text-xs text-white/70" style="">© 2025 Suzy Liu. All rights reserved.</p>
    <p class="text-sm text-white/70 sm:text-center" style="">Minimal, calm, and intentional photography crafted in black
      &amp; white.</p>
    <div class="sm:ml-auto flex items-center gap-3 justify-start sm:justify-end">
      <a href="#" class="inline-flex items-center gap-1 text-xs font-medium text-white hover:text-white/80 transition"
        style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="shield"
          class="lucide lucide-shield h-4 w-4">
          <path
            d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
            class=""></path>
        </svg>
        Privacy
      </a>
      <a href="#" class="inline-flex items-center gap-1 text-xs font-medium text-white hover:text-white/80 transition"
        style="">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          data-lucide="file-text" class="lucide lucide-file-text h-4 w-4">
          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path>
          <path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path>
          <path d="M10 9H8" class=""></path>
          <path d="M16 13H8" class=""></path>
          <path d="M16 17H8" class=""></path>
        </svg>
        Terms
      </a>
    </div>
  </div>
</div>