JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<ul class="flex-container">
  <li class="flex-item a">a</li>
  <li class="flex-item b">b</li>
  <li class="flex-item c">c</li>
  <li class="flex-item d">d</li>
  <li class="flex-item e">e</li>
</ul>

CSS

.flex-container {
  display: flex;
  list-style-type: none;
}

.flex-item {
  height: 6rem;
  width: 6rem;
  margin: 1rem;
  background-color: tomato;
  color: white;
  font-size: 2rem;
  font-family: sans-serif;
  padding: 1rem;
}

.a { order: 5; }
.b { order: 3; }
.c { order: 4; }
.d { order: 2; }
.e { order: 1; }