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 bars = document.getElementsByClassName('bars');
    for (var i = 0; i < bars.length; i++) {
        bars[i].style.borderLeftColor ="#"+genColor();
    }
});

function genColor() {
// take 3 random values, presumably this will be similar to MD5 bytes
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
 
// floor again
r = Math.floor(r);
g = Math.floor(g);
b = Math.floor(b);
 
if (r < 50 && g < 50 && b < 50) r += 50;
 
if (r > 150 && g > 150 && b > 150) r -= 100;
 
if (Math.abs(r - g) < 50 && Math.abs(r - b) < 50 && Math.abs(g - b) < 50) {
if (r > 50) r -= 50;
if (g > 50) g -= 50;
if (b < 200) b += 50;
}
 
var rstr = r.toString(16);
var gstr = g.toString(16);
var bstr = b.toString(16);
 
// pad 0's -- probably a better way, but this was easy enough.
if (rstr.length === 1) {
rstr = "0" + rstr;
}
if (gstr.length === 1) {
gstr = "0" + gstr;
}
if (bstr.length === 1) {
bstr = "0" + bstr;
}
 
return rstr + gstr + bstr;
}