JSFiddle - React, Tailwind, and code Playground

by khanklatt

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.0.1-p7/js/bootstrap.min.js"></script>
<ul id="people" class="nav navmenu-nav">
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="A1">Alex Anderson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="B1">Bobby Briseno</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="C1">Christy Carson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="D1">Don Danson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="E1">Edward Edwards</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="F1">Frank Furter</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="G1">Gary Gygax</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="H1">Howard Hanson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="I1">Irene Isaacson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="J1">Jamie Johnson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="K1">Kelly Kasper</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="L1">Larry Lawson</label>
    </li>
    <li>
        <label class="btn btn-primary">
            <input type="checkbox" value="M1">Melany Monson</label>
    </li>
</ul>

CSS

#people li {
    float: left;
}
#people .btn {
    width: 200px;
    margin: 5px;
}
#people .btn input {
    margin-right: 5px;
}

JavaScript

function colorCycle() {
    this.colors = ['#ea2f35', '#fc6539', '#feb733', '#ebdb35', '#acbd25', '#60db3b', '#39df9b', '#0a6665', '#2db497', '#1a3c65', '#34a9dd', '#575aaf', '#5e3c66', '#ac3d7a', '#b12946', '#b12810', '#ea5f35', '#fc6569', '#feb763', '#ebdb65', '#acbd55', '#60db6b', '#69df9b', '#3a6665', '#5db497', '#4a3c65', '#64a9dd', '#875aaf', '#8e3c66', '#ac6d7a', '#b15946', '#b12840', ];
}

colorCycle.prototype.next = function () {
    return this.colors.shift();
};

var rainbow = new colorCycle();

var elements = $('.btn');

$.each(elements, function (i, val) {
    var color = rainbow.next();
    var strokeColor = shadeColor(color, -50);
    $(val).css({
        'backgroundColor': color,
            'borderColor': strokeColor
    });
    console.log($(val));
});

// Credit: http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-and-blend-colors
function shadeColor(color, percent) {
    var num = parseInt(color.slice(1), 16),
        amt = Math.round(2.55 * percent),
        R = (num >> 16) + amt,
        G = (num >> 8 & 0x00FF) + amt,
        B = (num & 0x0000FF) + amt;
    return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
}