Tailwind Footer with Newsletter & Social Links

<div class="sm:p-10 bg-white/5 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-sm">
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
    <!-- Newsletter -->
    <div class="md:col-span-2">
      <h4 class="text-white text-xl sm:text-2xl font-semibold tracking-tight">Join Our Newsletter</h4>
      <div class="mt-4 relative">
        <label class="sr-only" for="footer-email">Email</label>
        <input id="footer-email" type="email" placeholder="Enter your email" class="w-full rounded-xl bg-white/5 ring-1 ring-white/10 px-4 pr-12 py-3 text-sm text-white/90 placeholder-white/40 outline-none focus:ring-2 focus:ring-indigo-400/40">
        <button aria-label="Subscribe" class="absolute right-1 top-1 bottom-1 inline-flex items-center justify-center rounded-lg px-3 bg-white/10 ring-1 ring-white/15 text-white/90 hover:bg-white/15 transition">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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 h-4.5 w-4.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
            </button>
      </div>
      <p class="text-xs text-white/60 mt-3">
        We’ll send weekly product updates and tips. No spam.
      </p>
    </div>

    <!-- Pages -->
    <div class="">
      <h5 class="text-white text-lg font-semibold tracking-tight mb-3">Pages</h5>
      <ul class="space-y-2 text-sm text-white/80">
        <li><a href="#" class="hover:text-white/90">Home</a></li>
        <li><a href="#" class="hover:text-white/90">About us</a></li>
        <li><a href="#" class="hover:text-white/90">Blog</a></li>
        <li><a href="#" class="hover:text-white/90">Features</a></li>
      </ul>
    </div>

    <!-- Resources -->
    <div class="">
      <h5 class="text-white text-lg font-semibold tracking-tight mb-3">Resources</h5>
      <ul class="space-y-2 text-sm text-white/80">
        <li class=""><a href="#" class="group inline-flex items-center gap-1 hover:text-white/90">Integrations <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"
              data-lucide="arrow-right"
              class="lucide lucide-arrow-right lucide-arrow-up-right h-3.5 w-3.5 opacity-70 group-hover:opacity-100">
              <path d="M5 12h14" class=""></path>
              <path d="m12 5 7 7-7 7" class=""></path>
            </svg></a></li>
        <li><a href="#" class="group inline-flex items-center gap-1 hover:text-white/90">Changelog <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"
              data-lucide="arrow-up-right"
              class="lucide lucide-arrow-up-right h-3.5 w-3.5 opacity-70 group-hover:opacity-100">
              <path d="M7 7h10v10" class=""></path>
              <path d="M7 17 17 7" class=""></path>
            </svg></a></li>
        <li><a href="#" class="group inline-flex items-center gap-1 hover:text-white/90">Careers <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"
              data-lucide="arrow-up-right"
              class="lucide lucide-arrow-up-right h-3.5 w-3.5 opacity-70 group-hover:opacity-100">
              <path d="M7 7h10v10" class=""></path>
              <path d="M7 17 17 7" class=""></path>
            </svg></a></li>
        <li><a href="#" class="group inline-flex items-center gap-1 hover:text-white/90">Contact us <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"
              data-lucide="arrow-up-right"
              class="lucide lucide-arrow-up-right h-3.5 w-3.5 opacity-70 group-hover:opacity-100">
              <path d="M7 7h10v10" class=""></path>
              <path d="M7 17 17 7" class=""></path>
            </svg></a></li>
      </ul>
    </div>
  </div>

  <!-- Social + legal -->
  <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="flex flex-wrap items-center gap-3 text-sm">
      <a href="#" aria-label="Facebook"
        class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-white/80 hover:text-white hover:bg-white/10 transition">
        <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" data-lucide="facebook"
          class="lucide lucide-facebook h-4 w-4">
          <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" class=""></path>
        </svg>
        Facebook
      </a>
      <a href="#" aria-label="Instagram"
        class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-white/80 hover:text-white hover:bg-white/10 transition">
        <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" data-lucide="instagram"
          class="lucide lucide-instagram h-4 w-4">
          <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>
        Instagram
      </a>
      <a href="#" aria-label="Twitter"
        class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-white/80 hover:text-white hover:bg-white/10 transition">
        <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" data-lucide="twitter"
          class="lucide lucide-twitter h-4 w-4">
          <path
            d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
            class=""></path>
        </svg>
        Twitter
      </a>
      <a href="#" aria-label="LinkedIn"
        class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-white/80 hover:text-white hover:bg-white/10 transition">
        <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" data-lucide="linkedin"
          class="lucide lucide-linkedin h-4 w-4">
          <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" class=""></path>
          <rect width="4" height="12" x="2" y="9" class=""></rect>
          <circle cx="4" cy="4" r="2" class=""></circle>
        </svg>
        LinkedIn
      </a>
    </div>
    <div class="flex items-center justify-start md:justify-end gap-4 text-xs text-white/60">
      <a href="#" class="hover:text-white/80">Privacy</a>
      <a href="#" class="hover:text-white/80">Terms</a>
      <a href="#" class="hover:text-white/80">Status</a>
    </div>
  </div>

  <div class="h-px bg-white/10 my-6"></div>

  <!-- Bottom bar -->
  <div class="flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-white/60">
    <p>© 2025 Orbyt Labs. All rights reserved.</p>
    <p class="text-white/50">ISO‑27001 ready • SOC 2 in progress • Data residency options</p>
  </div>
</div>