JSFiddle - React, Tailwind, and code Playground

HTML

<div class="secs">
    <div class="co-be">
        <div class="co-la html"></div>
         <h4>HTML 5</h4>
    </div>
    <p>87%</p>
</div>
<div class="secs">
    <div class="co-be">
        <div class="co-la css"></div>
         <h4>CSS 3</h4>
    </div>
    <p>50%</p>
</div>

CSS

.co-la {
    background: none repeat scroll 0 0 green;
    height: 25px;
    left: -37px;
    margin: 0;
    width: 0%;
    border: 1px solid black;
    /* só para o exemplo */
}
.secs:hover .co-la.html {
    width:87%;
}
.secs:hover .co-la.css {
    width: 50%;
}
.secs:hover .co-la {
    transition:width 1s;
}