JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" style="background-color:#e02; color:#fff;">
      <div class="content">
        <header>
          <h1>
            Title
          </h1>
        </header>
      </div>
    
      <div class="container" style="background-color:#fff";>
        <div class="content   ">
          <ul class="links">
            <a>link 1</a>
            <a>link 2</a> 
            <a>link 3</a> 
            <a>link 4</a> 
          </ul>
          <div class="text" style="background-color: #DDD;">
            <p>
             Go to this links and 
            </p>
    
          </div>
        </div>
      </div>
    </div>

CSS

*, *:before, *:after{
      margin: 0;
      padding: 0;
    }


    .container{float:left; width:100%}
    .content{width:50%; margin:0 25%; padding: 40px 0} 
    
    .links{
      width: 100%;
      display:inline-block;
    }
    
    
    .links a{
      padding: 30px;
      float: left;
      color:#aaa;
      font-size: 16px;
      font-weight: 600; 
      background: yellow;
      margin-top: -10%;
      border:1px solid #aaa;
    }