HTML
<div class="bars">
<ul>
<li class="bar-contain">
<span class="bar-expand" style="width:85%">
<div class="bar-label">Javascript</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:82%">
<div class="bar-label">C++</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:80%">
<div class="bar-label">React</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:75%">
<div class="bar-label">Node.js</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:72%">
<div class="bar-label">HTML5</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:68%">
<div class="bar-label">CSS</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:65%">
<div class="bar-label">JQuery</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:60%">
<div class="bar-label">Bootstrap</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:50%">
<div class="bar-label">Python</div>
</span>
</li>
<li class="bar-contain">
<span class="bar-expand" style="width:45%">
<div class="bar-label">Angular.js</div>
</span>
</li>
</ul>
</div>
CSS
.bars {
width: 80%;
}
.bar-contain {
width: 100%;
padding: 0;
margin: 0 0 46px 0;
background: #cccccc;
display: inline-block;
height: 42px;
border-radius: 3px;
}
.bar-label {
color: white;
font: 15px 'opensans-bold', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
position: relative;
top: 10px;
left: 10px;
}
.bar-expand {
left: 0;
top: 0;
margin: 0 0 46px 0;
padding: 0 24px 0 0 ;
background: #313131;
display: inline-block;
height: 40px;
border-radius: 3px 0 0 3px;
}
1 Response
https://www.npmjs.com/package/react-bars
https://github.com/jniemann66/react-bars