JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test">
  <li class="item1">
  A
  </li>
  <li class="item">
  B
  </li>
  <li class="item">
  C
  </li>
  <li class="item">
  D
  </li>  
  <li class="item">
  E
  </li>
</ul>

CSS

#test {
  list-style:none;
  width:100%;
}
  .item1{
    width:50%;
    float:left;
    height:300px;
    background-color:red;
  }
.item {
  width:25%;
  float:left;
  background-color: #444;
  height:150px;
}