JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    Enter The Width: <input type="number" name="colorWidth" min="100" max="600" id="colorWidth" value="560" />
</div>
<br /><br />
Example LARGE Color Select:
<div class="color-select select-large" ng-show="showColors">
    <a href="javascript:" ng-repeat="color in colors" select-color="7E1516" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}" class="ng-scope" style="background-color: rgb(126, 21, 22);"></a>
    <a href="javascript:" ng-repeat="color in colors" select-color="E94345" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}" class="ng-scope" style="background-color: rgb(233, 67, 69);"></a>
    <a href="javascript:" ng-repeat="color in colors" select-color="FE7B23" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}" class="ng-scope" style="background-color: rgb(254, 123, 35);"></a>
    <a href="javascript:" ng-repeat="color in colors" select-color="FFC038" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}" class="ng-scope" style="background-color: rgb(255, 192, 56);"></a>
    <a href="javascript:" ng-repeat="color in colors" select-color="FFE32F" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}" class="ng-scope" style="background-color: rgb(255, 227, 47);"></a>
    <a href="javascript:" ng-repeat="color in colors" select-color="8CBA1A" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}" class="ng-scope" style="background-color: rgb(140, 186, 26);"></a>
    <a href="javascript:" ng-repeat="color in colors" select-color="455E07" ng-click="selectColor(color)" ng-class="{'active' : selectedColors &amp;&amp; selectedColors.indexOf(color) &gt;= 0}"...

CSS

div.select-large {
    width: 560px;
}

div.select-small {
    width: 280px;
}

div.color-select {
    display: table;
}

div.color-select a {
    width: 1px;
    height: 22px;
    display: table-cell;
}

div.color-select a.active {
    height: 29px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000; border-right: 1px solid #000;
}

JavaScript

$(function () {
    $("#colorWidth").change(function (){
        $(".select-large").width($("#colorWidth").val() + "px");
        $(".select-small").width(
            (parseFloat($("#colorWidth").val()) / 2.0) + "px");
    });
});