JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<ul class="colorBar">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
</ul>

SCSS

$green: #6c9f2e;
$blue: #2081bf;
$blueDark: #0c4569;
$purple: #551387;
$red: #b5121b;
$orangeDark: #e67800;

ul.colorBar {
    list-style-type: none;
    padding: 0;

    background-color: $purple;
    display: block;
    height: 10px;
    margin: 0;
    overflow: hidden;

    li {
        float: left;
        width: 16.667%;
        height: 10px;

        &:nth-child(1) {
            background-color: $green;
        }
        &:nth-child(2) {
            background-color: $blue;
        }
        &:nth-child(3) {
            background-color: $blueDark;
        }
        &:nth-child(4) {
            background-color: $orangeDark;
        }
        &:nth-child(5) {
            background-color: $red;
        }
        &:nth-child(6) {
            background-color: $purple;
        }
    }
}

body {
  margin: 0;
}