JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<ul id="dashboard">
  <li class="part">1</li>
  <li class="part">2</li>
  <li class="part part-alto">3</li>
  <li class="part">4</li>
  <li class="part part-ancho">5</li>
  <li class="part">6</li>
  <li class="part">7</li>
  <li class="part">8</li>
  <li class="part part-ancho part-alto">9</li>
</ul>

CSS

#dashboard {
    list-style-type: none;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#dashboard li.part {
    margin: 2%;
    border: 1px solid red;
    float: left;
    width: 20%;
    height: 90px;
}
#dashboard li.part-ancho { width: 44%; }
#dashboard li.part-alto { height: 200px; }