JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div></div>
<div></div>
<div></div>

CSS

div{
    background-color: #ddd;
    width: 20px;
    height: 20px;
    margin: 10px;
    position: relative;
    left: 0;
    transition: background-color 300ms, left 300ms;
}

/*
div:nth-last-child(n+5),
div:nth-last-child(n+5) ~ div{
*/
div:nth-last-child(-n+5):first-child,
div:nth-last-child(-n+5):first-child ~ div {
    left: 30px;
    background-color: teal;
}

JavaScript

/**
 * QUANTITY QUERY TEST
 */
document.addEventListener('keyup', function(e){
    // Up (38)
    if(e.keyCode == 38){
        var d = document.querySelectorAll('body > div');
        if(d.length > 0){
	        d[d.length - 1].parentNode.removeChild(d[d.length - 1]);
        }
    }
    
    // Down (40)
    if(e.keyCode == 40){
        document.body.appendChild(document.createElement('div'));
    }
});