JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one" id="parent">
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div>

CSS

#parent {
    border: 1px solid #000000;
    height: 50px;
    margin: 5px 0;
    overflow: hidden;
    position: relative;
}
.child {    
    background-color: #CCCCCC;
    left: 50%;
    height: 50px;
    position: absolute;
    top: 0;
    transition: all 1s;
    width: 100px;
}
.child:nth-child(odd) {    
    background-color: #999999;
}
/*First .child selected*/
.one .child:nth-child(1) {
    background-color: yellow;
    margin-left: -50px;
}
.one .child:nth-child(2) {
    margin-left: 50px;
}
.one .child:nth-child(3) {
    margin-left: 150px;
}
.one .child:nth-child(4) {
    margin-left: 250px;
}
.one .child:nth-child(5) {
    margin-left: 350px;
}
.one .child:nth-child(6) {
    margin-left: 450px;
}
/*Second .child selected*/
.two .child:nth-child(1) {
    margin-left: -150px;
}
.two .child:nth-child(2) {
    background-color: yellow;
    margin-left: -50px;
}
.two .child:nth-child(3) {
    margin-left: 50px;
}
.two .child:nth-child(4) {
    margin-left: 150px;
}
.two .child:nth-child(5) {
    margin-left: 250px;
}
.two .child:nth-child(6) {
    margin-left: 350px;
}
/*Third .child selected*/
.three .child:nth-child(1) {
    margin-left: -250px;
}
.three .child:nth-child(2) {
    margin-left: -150px;
}
.three .child:nth-child(3) {
    background-color: yellow;
    margin-left: -50px;
}
.three .child:nth-child(4) {
    margin-left: 50px;
}
.three .child:nth-child(5) {
    margin-left: 150px;
}
.three .child:nth-child(6) {
    margin-left: 250px;
}
/*Fourth .child selected*/
.four .child:nth-child(1) {
    margin-left: -350px;
}
.four .child:nth-child(2) {
    margin-left: -250px;
}
.four .child:nth-child(3) {
    margin-left: -150px;
}
.four .child:nth-child(4) {
    background-color: yellow;
    margin-left: -50px;
}
.four .child:nth-child(5) {
    margin-left: 50px;
}
.four .child:nth-child(6) {
    margin-left: 150px;
}
/*Fifth .child selected*/
.five .child:nth-child(1) {
    margin-left: -450px;
}
.five .child:nth-child(2) {
    margin-left:...

JavaScript

$("#parent").on("click", function() {
    //Credit to Denys SĂ©guret for the class toggle http://stackoverflow.com/questions/14200833/jquery-toggling-between-3-classes-initially
    $(this).each(function(){
        var classes = ['one','two','three','four','five','six'];
        this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
    });
});