JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1 part">asd</div>
    </a>
    <div class="part2 part">asd</div>
    <div class="part3 part">asdsd</div>
    <a href="URL">
    <div class="part4 part">asdsdsd</div>
    </a>


  </body>

CSS

html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

.part{
  display:flex;
  justify-content: center;
  align-items: center;
  }