JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div class="row">
    <div class="col-md-12">
        <div class="containing_div">
            <div class="container_div"></div>
            <div class="menu_div">
                <div class="item_div">Photos</div>
                <div class="item_div">Video</div>
                <div class="item_div">Music</div>
                <div class="item_div">Files</div>
                <div class="item_div">Contacts</div>
            </div>
        </div>
    </div>
</div>

CSS

.containing_div {
    height: 100%;
}
.container_div {
    background: #fff;
    height: 100%;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family:"Open Sans";
    font-size: 26px;
    float: left;
    padding-top: 25px;
    position: relative;
}
.menu_div {
    background: transparent;
    float: left;
}
.item_div {
    background: #ddd;
    height: 80px;
    color: #bbb;
    font-family:"Open Sans";
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
    text-align: center;
    padding: 8px;
    border-radius: 0 2% 2% 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    cursor: hand;
}

JavaScript

window.onload = function () {
	var itemDivs = document.getElementsByClassName('item_div');
    for(var i = 0; i != itemDivs.length; i++){
     	itemDivs[i].onclick = function(e){
        	itemDivs[i].parent.removeChild(itemDivs[i]);
            this.parent.insertBefore(this,this.parent.children[0]);
        }   
    }
};