JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line">
    <span class="color-1"></span>
    <span class="color-2"></span>
    <span class="color-3"></span>
    <span class="color-4"></span>
    <span class="color-5"></span>
    <span class="color-6"></span>
    <span class="color-7"></span>
    <span class="color-8"></span>
    <span class="color-9"></span>
    <span class="color-10"></span>
</div>

CSS

span { display:block; width:10%; float:left; height:5px;}
.line{
    width:100%;
}
.color-1{
    background:green;
}
.color-2{
    background:yellow;
}
.color-3{
    background:purple;
}
.color-4{
    background:red;
}
.color-5{
    background:orange;
}
.color-6{
    background:lightgreen;
}
.color-7{
    background:gold;
}
.color-8{
    background:brown;
}
.color-9{
    background:lightblue;
}
.color-10{
    background:lightgrey;
}