JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="editor">
<style style="display: block;" contenteditable>
      :root {
              --color: #00FFFF;
            }
      </style>
 </div>
      
<div></div>
Change my color by typing another color code into the direct inline css. <br>
Works without any input element or JS.

CSS

div {
  height: 100px;
  width: 100px;
  background: var(--color);
}

.editor {
  width: 200px; 
  height: 25px;
  background: white;
  margin: calc(50vh - 25px) 0 calc(50vh - 25px) 0; 
  position: fixed; 
  z-index: 99; 
  border: 2px solid var(--color); 
  font-size. 25px;
}