JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
    <li class="active">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    display: flex;
    
    margin: 20px 0 0 -20px;
    padding: 0;
    
    list-style: none;
}

li {    
    margin-left: 20px;
    padding: 20px;
    
    background: #eee;
    
    cursor: pointer;
}

li.active {    
    background: #aaa;
}

li:nth-child(1) { order: 1; }
li:nth-child(2) { order: 2; }
li:nth-child(3) { order: 3; }
li:nth-child(4) { order: 4; }
li:nth-child(5) { order: 5; }

li:nth-child(1).active,
li:nth-child(2).active {
    order: 4;
}

li:nth-child(4).active,
li:nth-child(5).active {
    order: 2;
}

JavaScript

document.querySelector('#list').addEventListener('click', function(e) {

    this.querySelector('.active').classList.remove('active');
    e.target.classList.add('active');

}, false);