JSFiddle - React, Tailwind, and code Playground

by Kristian Jabilles

HTML

<div class="wrap">
  <ul class="list">
    <li class="list--item" style="order: 1;">1</li>
    <li class="list--item" style="order: 2;">2</li>
    <li class="list--item" style="order: 5;">3</li>
    <li class="list--item" style="order: 4;">4</li>
    <li class="list--item" style="order: 3;">5</li>
  </ul>
</div>

SCSS

.wrap {
  overflow: hidden;
}

.list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  
  &--item {
    padding: 15px 0;
    width: 150px;
    border: 1px solid #ccc;
    margin-right: 8px;
    text-align: center;
  }
}