Navbar Fixed On Top - Tailwind Component

<div class="w-full overflow-y-auto">
  <header>
    <div
      class="fixed w-full top-0 left-0 sm:px-12 mx-auto flex items-center justify-between p-4 shadow-2xl bg-indigo-800">
      <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>
  </header>
  <section class="mx-4">
    <div class="px-2 py-2 mx-auto my-auto max-w-7xl md:max-h-2xl md:py-6 text-center mt-24 bg-red-400">
      <h1 class="text-2xl text-black md:text-4xl font-bold bg-white">Lorem ipsum dolor sit amet consectetura dipisicing
        elit.</h1>
      <p class="text-justify mt-4 font-medium bg-white">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Voluptates, ullam ex distinctio esse eius cum in error nihil maxime fuga inventore voluptate consectetur sunt
        praesentium hic doloribus cumque quaerat ducimus provident autem nemo explicabo? Debitis maiores hic nulla,
        mollitia aperiam illum velit molestiae eos illo maxime consectetur reprehenderit. Nobis, ab.</p>
    </div>
    <div class="px-2 py-2 mx-auto my-auto max-w-7xl md:max-h-2xl md:py-6 text-center mt-10 bg-yellow-400">
      <h1 class="text-2xl text-black md:text-4xl font-bold bg-white">Lorem ipsum dolor sit amet consectetura dipisicing
        elit.</h1>
      <p class="text-justify mt-4 font-medium bg-white">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Voluptates, ullam ex distinctio esse eius cum in error nihil maxime fuga inventore voluptate consectetur sunt
        praesentium hic doloribus cumque quaerat ducimus provident autem nemo explicabo? Debitis maiores hic nulla,
        mollitia aperiam illum velit molestiae eos illo maxime consectetur reprehenderit. Nobis, ab.</p>
    </div>
    <div class="px-2 py-2 mx-auto my-auto max-w-7xl md:max-h-2xl md:py-6 text-center mt-10 bg-green-400">
      <h1 class="text-4xl text-black md:text-4xl font-bold bg-white">Lorem ipsum dolor sit amet consectetura dipisicing
        elit.</h1>
      <p class="text-justify mt-4 font-medium bg-white">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Voluptates, ullam ex distinctio esse eius cum in error nihil maxime fuga inventore voluptate consectetur sunt
        praesentium hic doloribus cumque quaerat ducimus provident autem nemo explicabo? Debitis maiores hic nulla,
        mollitia aperiam illum velit molestiae eos illo maxime consectetur reprehenderit. Nobis, ab.</p>
    </div>
    <div class="px-2 py-2 mx-auto my-auto max-w-7xl md:max-h-2xl md:py-6 text-center mt-10 bg-blue-400">
      <h1 class="text-4xl text-black md:text-4xl font-bold bg-white">Lorem ipsum dolor sit amet consectetura dipisicing
        elit.</h1>
      <p class="text-justify mt-4 font-medium bg-white">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Voluptates, ullam ex distinctio esse eius cum in error nihil maxime fuga inventore voluptate consectetur sunt
        praesentium hic doloribus cumque quaerat ducimus provident autem nemo explicabo? Debitis maiores hic nulla,
        mollitia aperiam illum velit molestiae eos illo maxime consectetur reprehenderit. Nobis, ab.</p>
    </div>
  </section>
  <div class="py-40"></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>