JSFiddle - React, Tailwind, and code Playground

by luwes

HTML

<ul id="one">
    <li>react</li>
    <li>sinuous</li>
    <li>vanillajs</li>
    <li>aged</li>
    <li>billowing</li>
    <li>black</li>
    <li>broken</li>
    <li>brook</li>
    <li>cherry</li>
    <li>cloud</li>
    <li>dawn</li>
    <li>dust</li>
    <li>fire</li>
    <li>frog</li>
    <li>frost</li>
    <li>frosty</li>
    <li>glitter</li>
    <li>grass</li>
    <li>green</li>
    <li>hill</li>
    <li>holy</li>
    <li>lake</li>
    <li>lively</li>
    <li>long</li>
    <li>morning</li>
    <li>mountain</li>
    <li>nameless</li>
    <li>patient</li>
    <li>shadow</li>
    <li>snowy</li>
    <li>star</li>
    <li>summer</li>
    <li>thunder</li>
    <li>winter</li>
    <li>young</li>
</ul>
<ul id="two">
    <li>aged</li>
    <li>billowing</li>
    <li>black</li>
    <li>broken</li>
    <li>brook</li>
    <li>cherry</li>
    <li>cloud</li>
    <li>dawn</li>
    <li>dust</li>
    <li>fire</li>
    <li>frog</li>
    <li>frost</li>
    <li>frosty</li>
    <li>glitter</li>
    <li>grass</li>
    <li>green</li>
    <li>hill</li>
    <li>holy</li>
    <li>lake</li>
    <li>lively</li>
    <li>long</li>
    <li>morning</li>
    <li>mountain</li>
    <li>nameless</li>
    <li>patient</li>
    <li>shadow</li>
    <li>snowy</li>
    <li>star</li>
    <li>summer</li>
    <li>thunder</li>
    <li>winter</li>
    <li>young</li>
</ul>

CSS

body {
    background-color: white;
    color: #111;
    font: normal 16px/1.5 sans-serif;
}

ul {
    -webkit-column-count: 4;
    column-count: 4;
    padding: 15px;
    margin: 0;
}

ul#two {
    color: white;
    background: #111;
}

li {
    list-style-type: none;
}

JavaScript

String.prototype.toColor = function() {
    var colors = ["#e51c23", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#5677fc", "#03a9f4", "#00bcd4", "#009688", "#259b24", "#8bc34a", "#afb42b", "#ff9800", "#ff5722", "#795548", "#607d8b"]

    var hash = 0;
    if (this.length === 0) return hash;
    for (var i = 0; i < this.length; i++) {
        hash = this.charCodeAt(i) + ((hash << 5) - hash);
        hash = hash & hash;
    }
    hash = ((hash % colors.length) + colors.length) % colors.length;
    return colors[hash];
}

var forEach = function(array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
        callback.call(scope, i, array[i])
    }
}

var list = document.querySelectorAll("#one li")
forEach(list, function(index, value) {
    list[index].style.color = list[index].textContent.toColor()
})
var list = document.querySelectorAll("#two li")
forEach(list, function(index, value) {
    list[index].style.color = list[index].textContent.toColor()
})