JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<p>
                    <label for="bg">BG color:</label>
                    <input class="input-class" type="input" id="mgBgColor" name="bg" value="" />    
                    <span class="picker" id="picker-mgBgColor">picker span</span>
                </p>
                <p>
                    <label for="textcolor">Text color:</label>
                    <input class="input-class" type="input" id="mgTextColor" name="textcolor" value="" />
                    <span class="picker" id="picker-mgTextColor">picker span</span>   
                </p>

CSS

.picker {
    display : none;
}

JavaScript

$('html, .input-class, input').click(function() { 
    $('.picker').fadeOut('fast'); 
});

$('.input-class').click(function(e){ 
    if(!$(this).next().is(":visible")) { 
        $(this).next().stop().fadeIn('fast'); 
    }
    e.stopPropagation(); 
});

$('.picker').click(function(e){ 
    $(this).fadeOut('fast');
    e.stopPropagation(); 
});