JSFiddle - React, Tailwind, and code Playground

by Matheus Castiglioni

HTML

<div class="caixa-1">1</div>
<div class="caixa-2">2</div>
<div class="caixa-3">3</div>
<div class="caixa-4">4</div>
<div class="caixa-5">5</div>

CSS

[class^=caixa] {
  font-size: 2rem;
  height: 100px;
  text-align: center;
  width: 100px;
}
.caixa-1 {
  background: #FF0000;
  float: left;
}

.caixa-2 {
  background: #0000FF;
  float: left;
}
.caixa-3 {
  background: #00FF00;  
  float: right;
}
.caixa-4 {
  background: #FFFF00;
  float: right;
}
.caixa-5 {
  background: #FF00FF;
  clear: both;
}