JSFiddle - React, Tailwind, and code Playground

HTML

<body>

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

    <a href="URL">
    <div class="part1">
      <div class="innerBlock">
      <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>
    <div class="part2">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <div class="part3">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <a href="URL">
    <div class="part4">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </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}

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

p {
  padding: 0;
  margin: 0 0 16px 0;
}