JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scores">
    <div id="score-bad" class="score color">bad</div>
    <div id="score-fair" class="score color selected-score">fair</div>
    <div id="score-good" class="score color">good</div>
    <div id="score-best" class="score color">best</div>
</div>

CSS

#scores {
    
}
.selected-score {
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}
.score {
    height: 60px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 30px;
    font-family: "Arial Black", Gadget, sans-serif;
    text-align: center;
    padding-top: 8px;
    position: relative;
}
.score:last-child {
    margin-right: 5px;
}

#score-bad {
    width: 35%;
}
#score-bad.color {
    background-color: #DC3912;
}
#score-bad:before {
    content: '300';
    position: absolute;
    color: #000000;
    font-size: 15px;
    bottom: -25px;
    left: -10px;
}
#score-bad:after {
    content: '640';
    position: absolute;
    color: #000000;
    font-size: 15px;
    bottom: -25px;
    right: -18px;
}
#score-fair {
    width: 30%;
}
#score-fair.color {
    background-color: #EF9C00;
}
#score-fair:after {
    content: '680';
    position: absolute;
    color: #000000;
    font-size: 15px;
    bottom: -25px;
    right: -18px;
}
#score-good {
    width: 15%;
}
#score-good.color {
    background-color: #009F3C;
}
#score-good:after {
    content: '720';
    position: absolute;
    color: #000000;
    font-size: 15px;
    bottom: -25px;
    right: -18px;
}
#score-best {
    width: 15%;
}
#score-best.color {
    background-color: #0669B2;
}
#score-best:after {
    content: '850';
    position: absolute;
    color: #000000;
    font-size: 15px;
    bottom: -25px;
    right: -12px;
}

JavaScript

setInterval(function() {
    $('.selected-score').toggleClass('color');
}, 400);