JSFiddle - React, Tailwind, and code Playground

by devy indriyani

HTML

<div class="rule-box">
            <h4>Color Rule</h4>
            <ul id="rules">
                <li data-type="1" class="active">Analogous</li>
                <li data-type="2">Monochromatic</li>
                <li data-type="3">Triad</li>
                <li data-type="4">Complementary</li>
                <li data-type="5">Custom</li>
            </ul>
        </div>
        <!-- picker canvas -->
        <div class="canvas">
            <canvas id="picker"></canvas>
        </div>
        <!-- samples -->
        <div class="samples">
            <div class="col" data-sample="3">
                <div class="sample"></div>
                <div class="input-group">
                    <span>RGB</span>
                    <input type="text" maxlength="3" class="rgb r">
                    <input type="text" maxlength="3" class="rgb g">
                    <input type="text" maxlength="3" class="rgb b">
                </div>
                <div class="input-group">
                    <span>HEX</span>
                    <input type="text" class="hex">
                </div>
            </div>
            <div class="col" data-sample="1">
                <div class="sample"></div>
                <div class="input-group">
                    <span>RGB</span>
                    <input type="text" maxlength="3" class="rgb r">
                    <input type="text" maxlength="3" class="rgb g">
                    <input type="text" maxlength="3" class="rgb b">
                </div>
                <div class="input-group">
                    <span>HEX</span>
                    <input type="text" class="hex">
                </div>
            </div>
            <div class="col selected" data-sample="0">
                <div class="sample"></div>
                <div class="input-group">
                    <span>RGB</span>
                    <input type="text" maxlength="3" class="rgb r">
                    <input type="text" maxlength="3" class="rgb...

CSS

html, body, div, span, applet, object, iframe,
            h1, h2, h3, h4, h5, h6, p, blockquote, pre,
            a, abbr, acronym, address, big, cite, code,
            del, dfn, em, img, ins, kbd, q, s, samp,
            small, strike, strong, sub, sup, tt, var,
            b, u, i, center,
            dl, dt, dd, ol, ul, li,
            fieldset, form, label, legend,
            table, caption, tbody, tfoot, thead, tr, th, td,
            article, aside, canvas, details, embed, 
            figure, figcaption, footer, header, hgroup, 
            menu, nav, output, ruby, section, summary,
            time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline;
            }
            article, aside, details, figcaption, figure, 
            footer, header, hgroup, menu, nav, section {
                display: block;
            }
            body {
                line-height: 1;
            }
            ol, ul {
                list-style: none;
            }
            blockquote, q {
                quotes: none;
            }
            blockquote:before, blockquote:after,
            q:before, q:after {
                content: '';
                content: none;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
            /* CSS */
            body {
                background-color: #222;
                margin-bottom: 25px;
                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
            /* rule box */
            .rule-box {
                position: absolute;
                top: 100px;
                left: 50px;
                box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
                background-color: #444;
            }
            .rule-box h4 {
                color: #BBB;
  ...

JavaScript

var picker = {
                canvas: document.getElementById('picker'), // the picker canvas element
                load: function() {
                    picker.context = picker.canvas.getContext('2d'); // set the canvas context
                    
                    picker.size = picker.wheel.size + picker.markers.outerSize; // set the picker size based on wheel size and some room for markers
                    picker.center = picker.size / 2; // set the center of the picker
                    
                    picker.wheel.radius = picker.wheel.size / 2; // set the radius of the wheel
                    picker.markers.outerRadius = picker.markers.outerSize / 2; // set the markers inner & outer radius
                    picker.markers.innerRadius = picker.markers.innerSize / 2;
                    
                    picker.canvas.width = picker.size; // set the canvas size based on the marker / wheel size
                    picker.canvas.height = picker.size;
                    
                    picker.wheel.image.onload = function() { // once the color_wheel img has been loaded
                        picker.wheel.draw(); // draw the wheel
                        picker.calculate({'x':picker.size - picker.markers.outerRadius - 1, 'y':picker.center}, 0); // calculate: marker 0 - far right
                    };
                    picker.wheel.image.src =...