JSFiddle - React, Tailwind, and code Playground

HTML

<div class="color-scale" data-bind="foreach: colors">
            <div class="color-scale-item horizontal" data-bind="style: {backgroundColor: $data}"></div><span data-bind=""></span>
        </div>

CSS

.color-scale {
    display: table;
}
.color-scale span {
    display:none;
}

.color-scale-item {
    width: 2px;
    height: 20px;
    display:table-cell;
    overflow:hidden;
}

JavaScript

var my_colors = [
    "#FF0DF0", "#FF08F0","#FF04F0", "#FF00E0","#FF0090","#FF0a00", 
    "#FF6e00","#FFd200","#3eff00","#00d4ff","#0032ff"];



    ko.applyBindings({
        colors: ko.observableArray(my_colors)
    });