JSFiddle - React, Tailwind, and code Playground

HTML

<div class="topo">TOPO</div>

 <div class="rodape">RODAPÉ</div>

CSS

body {
    margin:0;
  background-image: 
    linear-gradient(to left, red, red 50%, blue 50%),
    linear-gradient(to left, yellow, yellow 50%, green 50%);
  background-repeat: no-repeat;
  background-size:100% 40px;
  background-position:0 0, 0 100%;
}
.topo {
    width: 600px;
    margin: 0 auto;
    height: 40px;
    background: #ccc url(https://placeimg.com/600/40/people);
}
.rodape {
    width: 600px;
    margin: 300px auto 0 auto;
    height: 40px;
    background: #ccc url(https://placeimg.com/600/40/tech);
}    
}