Dark footer with newsletter

Build a dark site footer with Tailwind CSS. At the top, a two-part row with a heading and one line of copy on the left and an inline email subscribe form on the right, separated from the rest by a hairline white border. Below, four columns of grouped links with light headings and muted items, one of which carries a small "New" chip. Close with a bottom bar holding the copyright, a live status indicator with a green pulsing dot reading "All systems operational", and a compact language selector.

<footer class="bg-neutral-950 text-neutral-400">
  <div class="mx-auto max-w-6xl px-6 py-14">
    <div class="flex flex-col justify-between gap-6 border-b border-white/10 pb-10 md:flex-row md:items-center">
      <div>
        <h3 class="text-lg font-semibold text-white">Changelog, monthly</h3>
        <p class="mt-1 text-sm">What we shipped, what broke, and what is next. No marketing.</p>
      </div>
      <form class="flex w-full max-w-sm items-center gap-2">
        <input type="email" placeholder="[email protected]"
          class="w-full rounded-xl border border-white/15 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-white/40" />
        <button class="shrink-0 rounded-xl bg-white px-4 py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-200">Subscribe</button>
      </form>
    </div>
    <div class="grid gap-10 py-10 sm:grid-cols-2 lg:grid-cols-4">
      <div>
        <h4 class="text-sm font-medium text-white">Platform</h4>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">Runtime</a></li>
          <li><a href="#" class="hover:text-white">Storage</a></li>
          <li><a href="#" class="hover:text-white">Edge network</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-white">Developers</h4>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">Documentation</a></li>
          <li><a href="#" class="hover:text-white">API reference</a></li>
          <li><a href="#" class="inline-flex items-center gap-2 hover:text-white">Templates <span class="rounded-full bg-white/10 px-1.5 py-0.5 text-[10px] text-white">New</span></a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-white">Company</h4>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">About</a></li>
          <li><a href="#" class="hover:text-white">Careers</a></li>
          <li><a href="#" class="hover:text-white">Press kit</a></li>
        </ul>
      </div>
      <div>
        <h4 class="text-sm font-medium text-white">Legal</h4>
        <ul class="mt-3 space-y-2 text-sm">
          <li><a href="#" class="hover:text-white">Privacy</a></li>
          <li><a href="#" class="hover:text-white">Terms</a></li>
          <li><a href="#" class="hover:text-white">Subprocessors</a></li>
        </ul>
      </div>
    </div>
    <div class="flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-6 text-xs sm:flex-row">
      <p>© 2026 Orbit Systems, Inc.</p>
      <div class="flex items-center gap-6">
        <span class="flex items-center gap-2">
          <span class="relative flex h-2 w-2">
            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
            <span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
          </span>
          All systems operational
        </span>
        <select class="rounded-lg border border-white/15 bg-transparent px-2 py-1 text-xs text-neutral-300 outline-none">
          <option class="text-neutral-900">English</option>
          <option class="text-neutral-900">Deutsch</option>
          <option class="text-neutral-900">日本語</option>
        </select>
      </div>
    </div>
  </div>
</footer>