JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>


</head>
<body>
    <div id="wrapper">
        <div id="color_select">
            Please select from<br /> the colors below
            <div class="colors" style="background-color:#e9e792;"></div>
            <div class="colors" style="background-color:#f6d976;"></div>
            <div class="colors" style="background-color:#ec8c54;"></div>
            <div class="colors" style="background-color:#f5bc25;"></div>
            <div class="colors" style="background-color:#68bdda;"></div>
            <div class="colors" style="background-color:#aecdd2;"></div>
            <div class="colors" style="background-color:#80c0d0;"></div>
            <div class="colors" style="background-color:#e0c6cc;"></div>
            <div class="colors" style="background-color:#ec9fab;"></div>
            <div class="colors" style="background-color:#ec7a98;"></div>
            <div class="colors" style="background-color:#ea6a84;"></div>

        
        </div>
        <div id="table">
            <table>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                       ...

CSS

<style>
body {
    background-color: #b3c6ff;
    font-family: arial;
}

#wrapper {
    width: 650px;
    height: 600px;
    margin: 100px auto 0;

}
table {
    border-collapse:collapse;    
    border: 3px solid #777777;
    
}
td {
    background-color: white;
    border: 1px solid #555555;
    width: 20px;
    height: 20px;

}

#table {
    float: left;
}

#color_select {
    float: right;
    width: 150px;
    height: 377px;
    background-color: #dbd7d3;
    padding: 10px;
    border: 3px solid #777777;
    
}

.colors {
    width: 40px;
    height: 40px;
    cursor: pointer;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
}

#reset {
    background-color: #ffb5dc;    
    border: 1px solid #777777;
    padding: 3px;
    position: relative;
    top: 30px;
    left: 150px;
    cursor: pointer;
}

.shadow {
    

}
</style>

JavaScript

var currentColor;
        $('.colors').click(function() {
            $(this).fadeTo("fast", 0.40);
            currentColor = $(this).css("background-color");
            $('.colors').not(this).fadeTo("fast", 1);
        });
  

        $('table').mousedown(
        function() {
            $('td').hover(function(){
                $(this).css(
                "background-color", currentColor
                );            
            });
            }).mouseup(function(){
                $('table').css(function(){
                    return false;
            });
            });


        $("#reset").click(function() {
            $("td").css("background-color", "white")
        }
        );