JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js"></script>
<div id="colorpicker">
  <span id="overlayappear"></span>
  <span class="input-group-addon"></span>
</div>

<div class="overlay-cb">
  <button class="colorbox" value="#ff4000" style="background:#ff4000;"></button>
  <button class="colorbox" value="#ffbf00" style="background:#ffbf00;"></button>
  <button class="colorbox" value="#ffff00" style="background:#ffff00;"></button>
  <button class="colorbox" value="#00e64d" style="background:#00e64d;"></button>
  <button class="colorbox" value="#009933" style="background:#009933;"></button>
  <button class="colorbox" value="#4dadc9" style="background:#4dadc9;"></button>
  <button class="colorbox" value="#406fa5" style="background:#406fa5;"></button>
  <button class="colorbox" value="#243e5c" style="background:#243e5c;"></button>
  <button class="colorbox" value="#8000ff" style="background:#8000ff;"></button>
  <button class="colorbox" value="#bf00ff" style="background:#bf00ff;"></button>
  <button class="colorbox" value="#ff00ff" style="background:#ff00ff;"></button>
  <button class="colorbox" value="#ff0080" style="background:#ff0080;"></button>
  <button class="colorbox" value="#ffffff" style="background:#ffffff;"></button>
  <button class="colorbox" value="#dddddd" style="background:#dddddd;"></button>
  <button class="colorbox" value="#666666" style="background:#666666;"></button>
  <button class="colorbox" value="#333333" style="background:#333333;"></button>
  <div class="colorpicker-in-container">
  <input type="text" class="colorpickertext form-control" placeholder="ex: #4dadc9">
  </div>
</div>

CSS

body, html {background:#eaeaea;}

#colorpicker {
  position:relative;
  margin-left:50px;
  margin-top:50px;
  height:70px; 
  width:300px; 
  cursor:pointer;
  border-radius:4px;
}

#overlayappear {
  background:#4dadc9;
  width:80%;
  height: 70px;
  left: 0px;
  top: 0px;
  position: absolute;
}

.colorpickertext {
  margin-top:10px;
}
 
.overlay-cb {
  display:none;
  position:absolute;
  border:1px solid #dddddd;
  background: white;
  width: 155px;
  padding: 12px 7px;
  border-radius: 4px;
  text-align: center;
}

.overlay-cb .colorpicker-in-container {
  padding-left:10px;
  padding-right:10px;
}

.colorbox {
  margin: 1px;
  height: 25px;
  width: 25px;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  cursor:pointer;
}
.colorbox:hover {
  transform:scale(1.1);
}
.colorbox:focus, .colorbox:active {
  transform:scale(1.1);
  border:0px;
}

.input-group-addon {
  background:#fafafa;
  height:71px; 
  width:20%;
  position:absolute; 
  right:0px; 
  top:-0.3px;
}

JavaScript

$('.colorbox').click(function(element){
	$(".colorpickertext").val(element.target.value)
	$("#overlayappear").css({'background': element.target.value});
})

$(".colorpickertext").keyup(function(element){
	$("#overlayappear").css({
 	 'background': element.target.value
  });
});

$("#overlayappear").click(function(element) {
	element.stopPropagation();
	$(".overlay-cb").css({
  	'display': 'block',
  	'left': element.clientX + 'px', 
    'top': element.clientY + 'px',
  });
});

$(".overlay-cb").click(function(element) {
	element.stopPropagation();
});

$('html').click(function(event){
  $(".overlay-cb").css({
    'display': 'none'
  });
});

var hexadecimal = [{ "mask": "\\#hhhhhh"}];
$('.colorpickertext').inputmask({
	mask: hexadecimal, 
  greedy: false, 
  definitions: { 'h': { validator: "[A-Fa-f0-9]", cardinality: 1}} 
});