JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mediasubcontainer">
        <h3>Star Wars: Battlefront 2</h3>
        <a href="./pagedir/gamepagedir/s/starwarsbattlefront2.php"><img src="./img/gameposter/s/starwarsbattlefront2.jpg" alt="Star Wars: Battlefront 2"></a>
      </div>
      <div class="mediasubcontainer">
        <h3>The Elder Scrolls Online: Morrowind</h3>
        <a href="./pagedir/gamepagedir/t/theelderscrollsonlinemorrowind.php"><img src="./img/gameposter/t/elderscrollsonlinemorrowind.png" alt="The Elder Scolls Online: Morrowind"></a>
      </div>
      <div class="mediasubcontainer">
        <h3>Destiny 2</h3>
        <a href="./pagedir/gamepagedir/d/destiny2.php"><img src="./img/gameposter/d/destiny2.jpg" alt="Destiny 2"></a>
      </div>
  </div>
<h3>test</h3>
<h3>test</h3>
<h3>test</h3>
<h3>test</h3>
<h3>test</h3>
<footer>
  <ul>
    <a href="../../page1.php"><li>page1</li></a>
    <a href="../../page2.php"><li>page2</li></a>
    <a href="../../page3.php"><li>page3</li></a>
    <a href="../../page4.php"><li>page4</li></a>
    <a href="../../page5.php"><li>page5</li></a>
  </ul>
</footer>

CSS

footer {
  width: 100%;
  height: auto;
  color: #ffffff;
  background-color: #30323D;
  text-align: center;
}
footer ul{
  margin-left: 0;
  padding: 0;
  list-style-type: none;
}
footer ul a{
  text-decoration: none;
  color: #fff
}
footer p{
  margin-top: 120px;
}