JSFiddle - React, Tailwind, and code Playground

HTML

<footer>
  <div class="main-block">
    
  </div>
  <div class="fixed-div">
    <div class="main-block-2">
      <div class="menu">
        <div class="footer-menu">
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

CSS

footer {
  position: relative;
  max-width: 1000px;
  background-color: red;
  background-repeat: no-repeat;
  margin: 0;
}
.main-block {
  position: relative;
  max-width: 500px;
  height: 1900px;
  background-color: green;
  opacity: 0.5;
  margin: 0 auto;
}
.main-block-2 {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
.fixed-div {
  position: fixed;
  top:0;
  left: 0;
  color: red;
  width: 100%;
}
.menu {
  position: absolute;
  top: 0;
  right: 0;
}
.footer-menu {
  box-sizing: border-box;
  border: 2px solid white;
  width: 100%;
}
ul li {
  display: inline;
  text-transform: uppercase;
}