JSFiddle - React, Tailwind, and code Playground

HTML

<div id="height"></div>

<ul>
                                <li>HTML</li>
                                <li id="html" class="full">&nbsp</li>
                                <li>CSS</li>
                                <li id="css"></li>
                                <li>Javascript</li>
                                <li id="javascript"></li>
                                <li>PHP</li>
                                <li id="php"></li>
                                <li>MySQL</li>
                                <li id="mysql"></li>
                                <li>Wordpress</li>
                                <li id="wordpress"></li>
                            </ul>

CSS

#height {
 height:1000px;   
}

ul {
    list-style-type: none;
    font-family: 'Open Sans';
    color: #787878;
    font-size: 0.8em;
    font-weight: 500;
    font-style: italic;
    line-height: 160%;
    letter-spacing: 1px;
}

}
li {
    padding: 2px 0 2px 0;
}

#html {
    background-color: #0194bd;
    width:  0%;
    height: 9px;
    margin-bottom: 10px;
}

#css {
    background-color: #0194bd;
    width: 0%;
    height: 9px;
    margin-bottom: 10px;
}

#javascript {
    background-color: #0194bd;
    width: 0%;
    height: 9px;
    margin-bottom: 10px;
}

#php {
    background-color: #0194bd;
    width: 0%;
    height: 9px;
    margin-bottom: 10px;
}

#mysql {
    background-color: #0194bd;
    width: 0%;
    height: 9px;
    margin-bottom: 10px;
}

#wordpress {
    background-color: #0194bd;
    width: 0%;
    height: 9px;
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function(){
$(document).scroll(function() {
var top = $(document).scrollTop();
console.log(top);
if (top > 300) $("#html, #css").animate({width:"100%"}, 2000);
if (top > 300) $("#javascript").animate({width:"40%"}, 2000);
if (top > 300) $("#php").animate({width:"50%"}, 2000);
if (top > 300) $("#mysql").animate({width:"30%"}, 2000);
if (top > 300) $("#wordpress").animate({width:"60%"}, 2000);
});});