JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

Pick color:
<input class="getColor" type="color" name="favcolor">
<div class="selector">
    <div class="one1"></div>
    <div class="one2"></div>
    <div class="one3"></div>
    <div class="one4"></div>
    <div class="one5"></div>
    <div class="one6"></div>
    <div class="one7"></div>
    <div class="one8"></div>
    <div class="one9"></div>
    <div class="one10"></div>
    <div class="one11"></div>
    <div class="one12"></div>
    <div class="one13"></div>
    <div class="one14"></div>
    <div class="one15"></div>
    <div class="one16"></div>
    <div class="one17"></div>
    <div class="one18"></div>
    <div class="one19"></div>
    <div class="one20"></div>
    <div class="one21"></div>
    <div class="one22"></div>
    <div class="one23"></div>
    <div class="one24"></div>
    <div class="one25"></div>
    <div class="one26"></div>
    <div class="one27"></div>
    <div class="one28"></div>
    <div class="one29"></div>
    <div class="one30"></div>
    <div class="one31"></div>
    <div class="one32"></div>
    <div class="one33"></div>
    <div class="one34"></div>
    <div class="one35"></div>
    <div class="one36"></div>
    <div class="one37"></div>
    <div class="one38"></div>
    <div class="one39"></div>
    <div class="one40"></div>
    <div class="one41"></div>
    <div class="one42"></div>
    <div class="one43"></div>
    <div class="one44"></div>
    <div class="one45"></div>
    <div class="one46"></div>
    <div class="one47"></div>
    <div class="one48"></div>
    <div class="one49"></div>
    <div class="one50"></div>
    <div class="one51"></div>
    <div class="one52"></div>
    <div class="one53"></div>
    <div class="one54"></div>
    <div class="one55"></div>
    <div class="one56"></div>
    <div class="one57"></div>
    <div class="one58"></div>
    <div class="one59"></div>
    <div class="one60"></div>
    <div class="one61"></div>
    <div class="one62"></div>
    <div class="one63"></div>
    <div...

CSS

.selector {
    width: 320px;
    background: #d3d3d3;
    cursor:crosshair;
    margin-bottom: 350px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.rotation {
    width: 320px;
    background-color: white;
}
.selector > div {
    width:40px;
    height:40px;
    border:1px solid #d3d3d3;
    background:white;
    float:left;
    box-sizing:border-box;
}
.order {
    background:yellow;
    float:left;
    width:40px;
    height: 40px;
}
.empty {
    display:none;
}

JavaScript

var clicking = false;
var color = "black";
$('.selector').mousedown(function () {
    clicking = true;
});
$('.selector').mouseup(function () {
    clicking = false;
});
$(".selector > div").click(function () {
    $("." + this.className).css("background", color);
    console.log(this.className);
});
$(".selector").mouseleave(function () {
    clicking = false;
});
$(".getColor").change(function () {
    color = $(".getColor").val();
});
$(".selector > div").on("mouseover", function () {
    if (clicking) {
        $("." + this.className).css("background", color);
        console.log(this.className);
    }
});