JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="Kompetence-line one-grey">ASP.NET MVC</div>
    <div class="Kompetence-line three-green">HTML5</div>
    <div class="Kompetence-line six-grey">TFS</div>
    <div class="Kompetence-line two-green">CSS3</div>
    <div class="Kompetence-line four-grey">.NET</div>
    <div class="Kompetence-line one-green">Webforms</div>
    <div class="Kompetence-line five-grey">Security</div>
    <div class="Kompetence-line two-green">Windows Forms</div>
    <div class="Kompetence-line four-grey">Usability</div>
    <div class="Kompetence-line one-green">Kravspecifikation</div>
</div>

CSS

.Kompetence-line:nth-child(even) 
{
    background-color: #8dc63f;
    padding: 3px;
    padding-right: 10px;
    margin-bottom: 3px;
    width: 120px;
    color: #8dc63f;
    text-align: right;
}

.Kompetence-line:nth-child(odd) 
{
    background-color: rgb(169, 169, 169);
    padding: 3px;
    padding-right: 10px;
    margin-bottom: 3px;
    width: 120px;
    color: rgb(169, 169, 169);
    text-align: right;
    
}

.container .one-grey  {
    -webkit-animation: expand-grey 1s ease-in forwards;
}

.container .one-green  {
    -webkit-animation: expand-green 1s ease-in forwards;
}

.container .two-green  {
    -webkit-animation: expand-green 1.2s ease forwards;
}

.container .three-green  {
    -webkit-animation: expand-green 1.4s ease-out forwards;
}

.container .four-grey  {
    -webkit-animation: expand-grey 1.7s ease-in-out forwards;
}

.container .five-grey  {
    -webkit-animation: expand-grey 1.9s ease forwards;
}

.container .six-grey  {
    -webkit-animation: expand-grey 2.2s ease-out forwards;
}



@-webkit-keyframes expand-grey {
    0% {
        width: 120px;
        color: rgb(169, 169, 169);
    }
    
    75%
    {
        color: #8dc63f;
        color: rgb(169, 169, 169);
    }
    
    100% {
        color: white;
        width: 400px;
    }
}

@-webkit-keyframes expand-green {
    0% {
        width: 120px;
        color: #8dc63f;
    }
    
    75%
    {
        color: #8dc63f;
    }
    
    100% {
        color: white;
        width: 400px;
    }
}


/*
 .container {
    width: 400px;
    height: 400px;
}
.Kompetence-line {
    background-color: green;
    padding: 3px;
    margin-bottom: 3px;
    width: 120px;
}
.container:window-inactive .Kompetence-line {
    width: 400px;
    display: inline-block;
    transition-timing-function: ease-in-out;
    transition-duration: 3s;
}
.container:hover .Kompetence-line
{
    width: 400px;
    display: inline-block;
transition-timing-function: ease-in-out;
    transition-duration: 3s;
    
}*/