JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li class="content-box-blue">1</li>
        <li class="content-box-gray">2</li>
        <li class="content-box-green">3</li>
        <li class="content-box-purple">4</li>
        <li class="content-box-red">5</li>
        <li class="content-box-yellow">6</li>
    </ul>
</nav>

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
}
li {
    margin: 0;
    /* never use margin with li*/
    float:right;
    clear: both;
    padding: 0;
    margin-bottom: 20px;
}
nav {
    float: right;
    width: 400px;
    height: 500px;
    margin-top: 35px;
    margin-right: 10px;
    background-color: #ffffff;
}
.content-box-blue {
    background-color: #00bfff;
    border: 1px solid #afcde3;
    height: 50px;
    width: 0px;
    margin-left: 50px;
    border-top-left-radius: 8% 50%;
    border-bottom-left-radius: 8% 50%;
}
.content-box-gray {
    background-color: #FF69B4;
    border: 1px solid #bdbdbd;
    height: 50px;
    width: 0px;
    margin-left: 150px;
    border-top-left-radius: 12% 50%;
    border-bottom-left-radius: 12% 50%;
}
.content-box-green {
    background-color: #3CB371;
    border: 1px solid #b2ce96;
    height: 50px;
    width: 0px;
    margin-left: 100px;
    border-top-left-radius: 9% 50%;
    border-bottom-left-radius: 9% 50%;
}
.content-box-purple {
    background-color:#9370DB;
    border: 1px solid #bebde9;
    height: 50px;
    width: 0px;
    margin-left: 0px;
    border-top-left-radius: 6% 50%;
    border-bottom-left-radius: 6% 50%;
}
.content-box-red {
    background-color: #FF0000;
    border: 1px solid #e9b3b3;
    height: 50px;
    width: 0px;
    margin-left: 200px;
    border-top-left-radius: 13% 50%;
    border-bottom-left-radius: 13% 50%;
}
.content-box-yellow {
    background-color: #FFA500;
    border: 1px solid #fadf98;
    height: 50px;
    width: 0px;
    margin-left: 150px;
}

JavaScript

$(".content-box-blue").animate({
    width: '350px'
}, 1200);
$(".content-box-gray").animate({
    width: '250px'
}, 1200);
$(".content-box-green").animate({
    width: '300px'
}, 1200);
$(".content-box-purple").animate({
    width: '400px'
}, 1200);
$(".content-box-red").animate({
    width: '200px'
}, 1200);
$(".content-box-yellow").animate({
    width: '100%'
}, 1700);