JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Area 1</li>
  <li class="tiles">
    <ul>
      <li><a href="#">Topic 1</a></li>
      <li><a href="#">Topic 2</a></li>
      <li><a href="#">Topic 3</a></li>
      <li><a href="#">Topic 4</a></li>
    </ul>
  </li>
  <li>Area 2</li>
  <li class="tiles">
    <ul>
      <li><a href="#">Topic 5</a></li>
      <li><a href="#">Topic 6</a></li>
    </ul>
  </li>
</ul>

CSS

ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul {background: #fff;}
li {line-height: 50px; width: 100%; text-align: center; background: #66f; margin: 5px;}
li.tiles ul li {width: 33%; float: left; margin: 5px 0; background: none;}
li.tiles ul {overflow: hidden;}
li.tiles {text-align: left; margin: 0;}
a {color: #fff; text-decoration: none; display: block; background: #66f; margin: 5px;}