JSFiddle - React, Tailwind, and code Playground

HTML

<title>Title</title>
<body>
    <ul>
        <li class="bars"> <a>Marathon Men and Women</a></li>
        <li class="bars"> <a>Marathon Men and Women</a></li>
    </ul>
</body>

CSS

.bars {
    border-left-style: solid;
    border-left-width: 4px;
    padding-left: 10px;
}
ul {
    list-style-type: none;
}

JavaScript

$(document).ready(function () {
    var colors = ["#CCCCCC", "#333333", "#990099"];
    var bars = document.getElementsByClassName('bars');
    for (var i = 0; i < bars.length; i++) {
        bars[i].style.borderLeftColor = colors[Math.floor(Math.random() * colors.length)];
    }
});