JSFiddle - React, Tailwind, and code Playground

by johnc_22

HTML

<script src="http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js"></script>
<div id="maindiv">
    <h1>Color Config Demo</h1>
    <div class="colorconfig left">
        <div class="colorlabel left">
            <span id="sp_Color1">Custom Color:</span>
        </div>
         
        <div class="colortext left">
            <input type="textbox" id="tb_Color1" value="#FFFF00" />
        </div>
    </div>
    <div class="colorSelector left">
        <input id="childColor1" type="color" value="#FFFF00" data-text="hidden" data-hex="true" class="color childcolorSelector\" />
    </div>
</div>

CSS

body, input, h1
{
    font-family: tahoma;
    font-size: 11px;
}

#maindiv h1
{
    font-size: 14px;
}

.left
{
    float: left;
}

#config_main
{
    margin: 10px;
}

.colorconfig
{
    padding-top: 15px;
}

.colortext
{
    margin-left: 10px;
    width: 65px;
}

.colortext input
{
    width: 50px;
}

.colorlabel
{
    width: 125px;
    text-align: right;
    font-weight: bold;
}

.colorSelector {
    position: relative;
    width: 36px;
    height: 36px;
    background-color: #000000;
    margin: 5px 50px 5px 5px;
}

.colorSelector input, .colorSelector span {
    margin: 2px;
    width: 30px;
    height: 30px;
}

JavaScript

$.fn.mColorPicker.init.replace = false;
$(document).ready(function() {

    $('#childColor1').bind('colorpicked', function() {
        $('#tb_Color1').val($(this).val());
    });
    
    $('#tb_Color1').change(function() {
        //$.fn.mColorPicker.color = $(this).val();
        $.fn.mColorPicker.setInputColor('icp_childColor1', $(this).val()); // $.fn.mColorPicker.color);
    });
    
});