JSFiddle - React, Tailwind, and code Playground

HTML

<div id="decoration">
    <span data-color="green"></span><span data-color="pale-yellow"></span><span data-color="orange"></span><span data-color="red"></span><span data-color="light-purple"></span><span data-color="purple"></span><span data-color="blue"></span>
</div>

CSS

*{
    margin: 0px;
    padding: 0px;
}

#decoration{
    border: 1px solid red;
    padding: 0px;
    font-size:0.0001px;
}

span
{
    display:inline-block;
    vertical-align:top;
    height: 10px;
    width: calc(100% / 7);
    display: inline-block;
}

span[data-color='green']{
    background: #C3E279;
}

span[data-color='pale-yellow']{
    background: #F7FEC8;
}

span[data-color='orange']{
    background: #FFD069;
}

span[data-color='red']{
    background: #F27669;
}

span[data-color='light-purple']{
    background: #DC9CBE;
}

span[data-color='purple']{
    background: #C59AE0;
}

span[data-color='blue']{
    background: #969DCC;
}