JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="menu">
    <div class="score" id="first">first</div>
    <div class="score" id="second">second</div>
    <div class="score" id="third">third</div>
    <p id="pp"></p>
</div>

CSS

div.menu {
	width: 300px;
	position: relative;
}
div.menu:after {
	content: '';
	display: table;
	clear: both;
}
div.score {
	float: left;
	width: 100px;
	text-align: center;
	font-size: 25px;
	background: #eee;
	padding: 20px 0;
	cursor: pointer;
	border-right: 1px solid grey;
	box-shadow: 0 0 2px grey;
}
div#third {
	border-right: none;
}
div.menu p {
	width: 100px;
	height: 3px;
	background: red;
	position: absolute;
	bottom: -17px;
	left: 0;
}
*{
  box-sizing: border-box;
}

JavaScript

function luka() {
        var x = document.getElementById('first');
        var y = document.getElementById('second');
        var z = document.getElementById('third');
        var c = document.getElementById('pp');
        x.onclick = function(){
            c.style.background = "black";
            c.style.transition = "0.3s";
            c.style.transform = "translateX(0)";
        }
        y.onclick = function(){
            c.style.background = "red";
            c.style.transition = "0.3s";
            c.style.transform = "translateX(100px)";
        }
        z.onclick = function(){
            c.style.background = "brown";
            c.style.transition = "0.3s";
            c.style.transform = "translateX(200px)";
        }
    }
    luka()