JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://bgrins.github.io/spectrum/spectrum.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<span class="button">click
  
  <span class="holder">
    <input type="text" id="colorpicker">
  </span>

</span>

CSS

.button{
  display:inline-block;
  background:orange;
  height:30px;
  text-align:center;
}
.holder{
  background:black;
  position:absolute;
  top:30px;
  left:0px;
  padding:10px;
  display:none;
  
}

.sp-dragger{
	width: 6px;
	height: 6px;
	border: 2px solid #FFF;
}

.sp-top-inner{
	width: 192px !important;
}

.sp-picker-container{
	border-left: 0 none !important;
	padding-left:5px;
	padding-right: 5px;
	width: 180px;
}

.sp-container{
	position: relative !important;
	left: 0 !important;
	top: 0 !important;
	background: transparent !important;
	border: 0 none !important;
}

JavaScript

$(".button").on("click", function(){
	$(".holder").fadeIn(300);
})
$('#colorpicker').spectrum({
    color: "#f00",
    showInput: true,
    
    flat: true
});