Navbar Transparant - Tailwind Component

<div class="w-screen h-screen">
  <div
    class="absolute inset-0 bg-cover bg-center" style="background-image: url(https://images.pexels.com/photos/3835/abstract.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);">
  </div>
  <div class="relative" id="relative">
    <header>
      <div class="sm:px-12 mx-auto flex items-center justify-between p-4 shadow-2xl bg-white bg-opacity-30">
        <div class="flex items-center space-x-2">
          <button>
            <img src="https://cdn-icons-png.flaticon.com/128/3845/3845868.png" alt="Logo" class="w-10">
          </button>
        </div>
        <nav class="flex items-center space-x-1 text-sm font-medium text-gray-800">
          <button class="rounded bg-red-600 px-3 py-2 text-white transition hover:bg-red-700"> Sign Up </button>
        </nav>
      </div>
      <div class="relative">
        <div class="px-2 mx-2 py-2 sm:mx-auto my-auto max-w-7xl md:max-h-2xl md:py-6 text-center mt-32 bg-white bg-opacity-50">
          <h1 class="text-4xl text-black md:text-5xl font-bold bg-white">Lorem ipsum dolor sit amet consectetura
            dipisicing elit.</h1>
        </div>
      </div>
    </header>

  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  body {
    font-family: 'Space Mono', monospace;
  }
</style>