JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<div class="content">
    <div class="col">
      <h2>My Skill</h2>
        <ul id="skill">
        <li><span class="expand html5"></span><em>HTML 5</em></li>
        <li><span class="expand css3"></span><em>CSS 3</em></li>
        <li><span class="expand jquery"></span><em>jQuery</em></li>
        <li><span class="expand photoshop"></span><em>Photoshop</em></li>
        <li><span class="expand dreamweaver"></span><em>Dreamweaver</em></li>
        </ul>
    </div>
</div>

CSS

.content{
    width:278px;
    margin:0;
    position:relative;
    float:left;
    font-size:12px;
    line-height:2em;
    padding:30px 0 30px;
}

.col { width:280px; }

#skill { 
    list-style:none; 
    padding-top:30px;
}

#skill li { 
    margin-bottom:70px; 
    background:#000; 
    height:5px; 
    border-radius:3px; 
    border-left:1px solid #111; 
    border-top:1px solid #111; 
    border-right:1px solid #333; 
    border-bottom:1px solid #333;  
}

#skill li em { 
    position:relative; 
    top:-30px;
}

.expand { 
    height:1px; 
    margin:2px 0; 
    background:#2187e7; 
    position:absolute;
    box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
}

.html5       { width:70%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;       }
.css3        { width:90%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;        }
.jquery      { width:50%;  -moz-animation:jquery 2s ease-out;      -webkit-animation:jquery 2s ease-out;      }
.photoshop   { width:10%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;   }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width:10%;}  }
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width:10%;}  }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }