* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    width: 500px;
    background-color: gray;
    margin: 0 auto;
    padding: 24px;
    border-radius: 16px;
}

.container li{
    list-style-type: none;
    text-transform: uppercase;
    font-weight: bold;
    margin: 64px 0;
    position: relative;
}

.container li::before {
    content: '';
    background-color: rgb(170, 167, 173);
    width: 100%;
    height: 24px;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    border-radius: 1000px;
}

.container li::after {
    content: '';
    background-color: rgb(249, 249, 250);
    width: 0;
    height: 24px;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    border-radius: 1000px;

    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 3;
    animation-direction: normal;
    animation-fill-mode: forwards;
}

.container li.html::after {
    animation-name: html;
}

@keyframes html {
    to {
        width: 90%;
        background-color: green;
    }
}

.container li.css::after {
    animation-name: css;
}

@keyframes css {
    to {
        width: 80%;
        background-color: blue;
    }
}

.container li.js::after {
    animation-name: js;
}

@keyframes js {
    to {
        width: 40%;
        background-color: orange;
    }
}

.container li.tailwind::after {
    animation-name: tailwind;
}

@keyframes tailwind {
    to {
        width: 60%;
        background-color: greenyellow;
    }
}

.container li.react::after {
    animation-name: react;
}

@keyframes react {
    to {
        width: 20%;
        background-color: red;
    }
}