JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="Kompetence-line one ease-in" style="width: 350px;">
        <span>ASP.NET MVC</span>
    </div>
    <div class="Kompetence-line three ease-out" style="width: 400px;"><span>HTML5</span>

    </div>
    <div class="Kompetence-line six ease-out" style="width: 370px;"><span>TFS</span>

    </div>
    <div class="Kompetence-line two ease" style="width: 385px;"><span>CSS3</span>

    </div>
    <div class="Kompetence-line four ease-in-out" style="width: 370px;"><span>.NET</span>

    </div>
    <div class="Kompetence-line one ease-in" style="width: 400px;"><span>Webforms</span>

    </div>
    <div class="Kompetence-line five ease" style="width: 365px;"><span>Security</span>

    </div>
    <div class="Kompetence-line two ease" style="width: 385px;"><span>Windows Forms</span>

    </div>
    <div class="Kompetence-line four ease-in-out" style="width: 350px;"><span>Usability</span>

    </div>
    <div class="Kompetence-line one ease-in" style="width: 385px;"><span>Kravspecifikation</span>

    </div>
</div>

CSS

.Kompetence-line {
     padding: 3px;
     padding-right: 10px;
     margin-bottom: 3px;
     width: 120px;
     text-align: right;
     -webkit-animation: expand 1s ease-in forwards;
 }
 
 .Kompetence-line:nth-child(even) 
 {
     background-color: #8dc63f;
 }
 
 .Kompetence-line:nth-child(odd) 
 {
     background-color: rgb(169, 169, 169);
 }
 
 .Kompetence-line span {
     color: white;
     opacity: 0;
     -webkit-animation: inherit;
     -webkit-animation-name: fade-in;
 }
 
 .one {
     -webkit-animation-duration: 1s;
 }
 
 .two {
     -webkit-animation-duration: 1.2s;
 }
 
 .three {
     -webkit-animation-duration: 1.4s;
 }
 
 .four {
     -webkit-animation-duration: 1.7s;
 }
 
 .five {
     -webkit-animation-duration: 1.9s;
 }
 
 .six {
     -webkit-animation-duration: 2.2s;
 }
 
 .ease-in {
     -webkit-animation-timing-function: ease-in;
 }
 
 .ease {
     -webkit-animation-timing-function: ease;
 }
 
 .ease-out {
     -webkit-animation-timing-function: ease-out;
 }
 
 .ease-in-out {
     -webkit-animation-timing-function: ease-in-out;
 }
 
 @-webkit-keyframes fade-in {
     0% {
         opacity: 0;
     }
     
     75%
     {
         opacity: 0;
     }
     
     100% {
         opacity: 1;
     }
 }
 
 @-webkit-keyframes expand {
     0% {
         width: 120px;
     }
   
 }