JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="parent">
  <div class="col col-1">
    <p>
    col 1
    </p>
  </div>
  <div class="col col-2">
    <p>
    col 2
    </p>
  </div>
  <div class="col col-3">
    <p>
    col 3
    </p>
  </div>
</div>

CSS

.parent {
  width: 100%;
  height: 100%;
  display: flex;
}

.col {
  
  width: 20%;
  padding: 10px;
  margin: 10px;
  border: 10px solid grey;
}

.col:nth-of-type(2) {
  background: white;
}

.col-1 {
  background: tomato;
}
.col-2 {
  background: lime;
  order: 3;
}
.col-3 {
  background: teal;
}