JSFiddle - React, Tailwind, and code Playground

HTML

<footer>
<div class="main-block">
     <div class="menu">
       <div class="footer-menu">
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
       </ul>
       </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;
}
.menu {
  position: fixed;
  top:0;
  right: 0;
  color: red;
}
.footer-menu {
  box-sizing: border-box;
  border: 2px solid white;
  width: 100%;
}
ul li {
  display: inline;
  text-transform: uppercase;
}