JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="contenedor">
    <div class="barra">
          <div class="color" id="photo"></div>
          <div class="texto">Photoshop</div>
    </div><br>
    <div class="barra">
        <div class="color" id="In"></div>
        <div class="texto">InDesing</div>
    </div><br>
    <div class="barra">
        <div class="color" id="Ill"></div>
        <div class="texto">Illustrator</div>
    </div>
</div>

CSS

.contenedor{
	width:500px;
}
.barra{
	position:relative;
	height:30px;
	background-color:#D5D5D5;
	width:100%;
	padding-top:5px;
}
.texto{
	position:absolute;
	padding-top:4px;
	padding-left:10px;
}
.color{
	position: absolute;
	background-color: #00BDE4;
	height: 25px;

}

JavaScript

$(document).ready(function(){
		$('#photo').animate({
			width: 50+"%",
		});
		$('#In').animate({
			width: 70+"%",
		});
		$('#Ill').animate({
			width: 90+"%",
		});
	})