JSFiddle - React, Tailwind, and code Playground

by Mawel Don

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="containerSkills">
<span class="hide">PHP / SQL<br></span>
  PHP
  <div data-level="50" class="innerSkill">PHP7</div>
  <div data-level="60" class="innerSkill">Laravel</div>
  <div data-level="70" class="innerSkill">Smarty</div>
  <div data-level="80" class="innerSkill">Blade</div>
  <div data-level="50" class="innerSkill">OOP</div>
  SQL
  <div data-level="70" class="innerSkill">MySQL</div> 
</div>

SCSS

.containerSkills{
  font-family:sans-serif;
  line-height: 25px;
  font-size: 20px;
  background-color:#000;
  color: #fff;
  padding: 5px;
  border: 2px solid grey;
  max-height: 20px;
  width: 160px;
  overflow:hidden;
  transition: max-height 1s ease, width 1s ease;
  &:hover {
      max-height:300px;
      width:300px;
      .innerSkill{
        padding-left: 5px;
        &:before{
           visibility: visible;
           opacity: 1;
        }
      }
  }
  .innerSkill{
    white-space:nowrap;
    font-size: 18px;
    margin: 5px;
    background-color: #fff;
    color:#000;
    width: 0;
    transition: width 1s ease, padding 0.8s linear;
    transition-delay: 1s;
    position:relative;
      &:before{
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s linear;
        transition-delay: 2s;
        content: attr(data-level)"%";
        color: #fff;
        position: absolute;
        right:-45px;
      }
  }
}

JavaScript

$('.containerSkills').hover(function(){
	$(this).children('.hide').fadeToggle();
  $(this).children('.innerSkill').each(function(){
      width = $(this).attr('data-level') * 0.85;
      width += '%';
      $(this).css('width',width);
    })
})

$('.containerSkills').mouseleave(function(){
	$(this).children('.innerSkill').each(function(){
    $(this).css('width',0);
  })
})