JSFiddle - React, Tailwind, and code Playground

HTML

<input type="color" id="foo">
<pre id="out"></pre>

CSS

#out {
  width: 10em;
  height: 10em;
  outline: solid 1px red;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

JavaScript

foo.oninput = function(){
 out.style.backgroundColor = this.value;
}