JSFiddle - React, Tailwind, and code Playground

HTML

<div class="upper">
  <div class="box left">
    <h1>Title</h1>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cupiditate ut quo nesciunt expedita omnis, quibusdam, eligendi laborum et repellendus non impedit modi, asperiores explicabo, nihil. Nostrum quibusdam fugit labore?
    </div>
  </div>
  
  <div class="box left">
    <h1>Title</h1>
    <div class="content">
     <ul>
       <li><a href="#">lorem</a></li>
       <li><a href="#">lorem</a></li>
       <li><a href="#">lorem</a></li>
       <li><a href="#">lorem</a></li>
     </ul>
    </div>
  </div>
  
    <div class="box left">
    <h1>Title</h1>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cupiditate ut quo nesciunt expedita omnis, quibusdam, eligendi laborum et repellendus non impedit modi, asperiores explicabo, nihil. Nostrum quibusdam fugit labore?
    </div>
  </div>
  
  <div class="box left">
    <h1>Title</h1>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat cupiditate ut quo nesciunt expedita omnis, quibusdam, eligendi laborum et repellendus non impedit modi, asperiores explicabo, nihil. Nostrum quibusdam fugit labore?
    </div>
  </div>
  <div class="clear"></div>
  
   <ul class="bottom">
       <li><a href="#">lorem</a></li>
       <li><a href="#">lorem</a></li>
       <li><a href="#">lorem</a></li>
       <li><a href="#">lorem</a></li>
   </ul>
</div>

CSS

.upper {
  background-color: black;
}
.upper  h1          { color: #f1f1f1; }
.upper  div.content { color: #888888; }

.box{ width: 24%; }

.upper ul { margin: 0; padding: 0; list-style: none }
.upper ul.bottom li { display: inline-block }

.upper div.content ul a { color: #277192 }
.upper ul.bottom a { color: #888; }
.upper ul.bottom { margin: 5px }

.upper ul a { text-decoration: none }

.left { float: left }
.clear{ clear: both }