JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div class="content-container">
        <div class="blast-features">
            <div class="blast-features-head"></div>
            <div id="button_wrapper" class="button-wrapper">
                <ul id="blast_tray" class="blast-buttons">
                    <li id="button0" class="message-button1" onclick="carousel(event)"><div></div></li>
                    <li id="button1" class="link-button1" onclick="carousel(event)"><div></div> </li>
                    <li id="button2" class="live-button1" onclick="carousel(event)"><div></div> </li>
                    <li id="button3" class="social-button1" onclick="carousel(event)"><div></div></li>
                    <li id="button4" class="ppt-button1" onclick="carousel(event)"><div></div> </li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

#content{ 
    background: #fff; 
}
.content-container{ 
    padding-top: 10px; 
    height: 490px;  
    position: relative; 
}
.blast-features{
    height: 311px;
    width: 760px;
    margin-left: 97px;
    margin-bottom: 20px;
    overflow: hidden;
}
.button-wrapper{
    overflow:hidden;
    z-index: 1;
    width: 760px;
    position: absolute;
}
.blast-buttons{
    width: 1300px;
    height: 117px;
    list-style-type: none;
    overflow: hidden;
    margin-left: -134px;
}
.blast-buttons li {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s;
    z-index: 0;
}

#button0{
    background: blue;
    height: 117px;
    float: left;
    left:50px;
    width: 134px;
    display: block;
    cursor: pointer;
    position: absolute;
}

#button1{
    background: black;
    height: 117px;
    float: left;
    left:194px;
    width: 134px;
    display: block;
    cursor: pointer;
    position: absolute;
}

#button4{
    background: yellow;
    height: 117px;
    float: left;
    left:623px;
    width: 134px;
    display: block;
    cursor: pointer;
    position: absolute;
}

#button3{
    background: red;
    height: 117px;
    float: left;
    left:479px;
    width: 134px;
    display: block;
    cursor: pointer;
    position: absolute;
}

#button2{
    background: green;
    height: 117px;
    float: left;
    left:335px;
    width: 134px;
    display: block;
    cursor: pointer;
    position: absolute;
}

JavaScript

var cur_position = '';
var cc = 0;
var done = '';

function set_variables() {
    cur_position = document.getElementById("button2");
    done = false;
}


function carousel(Event) {
    if (Event.target == cur_position) {
        done == false;
    }

    else if (done == false) {
        var clicked_element = Event.target;
        var button_moved = '';
        var num = 0;
        var pixelMargin = '';
        var styleDef = '';
        var number = '';

        if (clicked_element.offsetLeft < cur_position.offsetLeft) {
            num = cur_position.offsetLeft - clicked_element.offsetLeft;
            for (var i = 0; i < 5; i++) {
                button_moved = document.getElementById("button" + i);
                styleDef = window.getComputedStyle(button_moved);
                pixelMargin = parseInt(styleDef.left, 10);
                pixelMargin += num;
                document.getElementById("button" + i).style.left = pixelMargin + 'px';
            }
            if (num < 150) {
                number = 1;
            }
            else {
                number = 2;
            }

            cur_position = clicked_element;
            rotate_buttons_left(number);
        }

        else if (clicked_element.offsetLeft > cur_position.offsetLeft) {
            num = clicked_element.offsetLeft - cur_position.offsetLeft;

            for (var i = 0; i < 5; i++) {
                button_moved = document.getElementById("button" + i);

                styleDef = window.getComputedStyle(button_moved);
                pixelMargin = parseInt(styleDef.left, 10);
                pixelMargin -= num;
                document.getElementById("button" + i).style.left = pixelMargin + 'px';

            }
            if (num < 150) {
                number = 1;
            }
            else {
                number = 2;
            }
            cur_position = clicked_element;
            rotate_buttons_right(number);
        }
        done = true;
    }
}

function...