JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mySkills">
    <h1>kills</span></h1
    
    <button id="update">Update Values</button>
    
    <div class="skill">
        <h6>HTML</h6>
        <div class="progress_bar orange">
            <div style="width: 0%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>CSS</h6>
        <div class="progress_bar teal">
            <div style="width: 0%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>Photoshop</h6>
        <div class="progress_bar blue">
            <div style="width: 0%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>PHP</h6>
        <div class="progress_bar green">
            <div style="width: 0%;"></div>
        </div>
    </div>
    <div class="skill">
        <h6>Javascript</h6>
        <div class="progress_bar yellow">
            <div style="width: 0%;"></div>
        </div>
    </div>
</div>

CSS

.skill {
    display: none;
}

.progress_bar div {
    background-color: #6A6;
    height: 20px;
    transition: width 1s;
    -webkit-transition: width 1s;
}

JavaScript

$("#update").on("click", function(){
    $(".skill").fadeIn(800);
    $(".orange div").css("width", "75%");
    $(".teal div").css("width", "67%");
    $(".blue div").css("width", "80%");
    $(".green div").css("width", "55%");
    $(".yellow div").css("width", "55%");
});