JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-world-background"></div>
<div class="container-fluid"></div>
<footer class="site-footer">
    <div class="footer-content">
        <a href="/about-us">
            <div class="aboutUs">About</div>
        </a></div>
</footer>

CSS

html, body {
  height: 100%;
  background-color: black;
  font-family: ProximaNovaAltBold,Arial,Helvetica,Sans-serif;
}

   .my-world-background {
      position:absolute;
      width: 100%;
      height: 100%;
      background-color:green;
      z-index:-1;
    }
    
    .container-fluid {
      min-height: 100%;
      width:100%;
      /* equal to footer height */
      margin-bottom: -42px;
    }
    .container-fluid:after {
      content: "";
      display: block;
    }
    .site-footer, .container-fluid:after {
      /* .push must be the same height as footer */
      height: 42px;
    }
    .site-footer {
      padding-top:20px;
      min-width:200px;
    }
    
    .footer-content {
      text-align:center;
      font-size:22px;
      color:green;
    }
    
    .aboutUs, .term, .privacy {
      display:inline-block;
      margin-left:10px;
    }
    
    .aboutUs:hover {
        color:red;
    }