JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div class="wrap">
  <p class="box">1</p>
  <p class="box">2</p>
  <p class="box big">3</p>
  <p class="box">4</p>
  <p class="box">5</p>
  <p class="box">6</p>
  <p class="box big">7</p>
  <p class="box">8</p>
  <p class="box">9</p>
  <div class="clear"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vel maiores accusamus ullam, impedit dignissimos vero tempora, velit aperiam modi ut repellat sapiente quo similique sunt esse, deleniti eius numquam!</p>

CSS

.wrap {
  width: 175px;
  padding: 10px 5px 5px 10px;
  border: 1px solid green;
}
.box {
  float: left;
  margin: 0 5px 5px 0;
  padding: 8px 0 0;
  width: 30px;
  height: 30px;
  color: white;
  text-align: center;
  background: blue;
}
.big {
  height: 40px;
  background: navy;
}
.aclear { clear: both;}