JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">


<div class="content-wrapa">
  <h1>
  Header
  </h1>
  <p id="asd">
  das raar
  </p>
</div>

<div class="content-wrapb">
  <p id="body">
  Dit is een test
  </p>
</div>

<div class="content-wrapc">
  <p id="footer-a">
  Footer
  </p><p id="footer-b">
    <a href="#">test 1</a>
    <a href="#">test 12</a>
    <a href="#">test 13</a>
  </p>

</div>

CSS

.wrapper{
  max-width:950px;
  margin:0 auto;
}


#asd, h1 {
 background:#3399ff;
}


#body{
  background:#ffe733;
}


h1,p{
  margin:0;
  padding:20px;
}

.content-wrapc a{
  background:white;
  padding:20px;
}
.content-wrapc {
   background:#ff3366;
  
}
#footer-a{
  width:50%;
  background:black;
  display:inline-block;
  
}
#footer-b{
 width:50%;
  background:blue;
  display:inline-block;
   text-align:center;
}

#footer-b > a{
  text-align:center;
}