JSFiddle - React, Tailwind, and code Playground

by Yan Vetrov

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  

  

  
  

  
  

  
  

  
  

  
  

  <script type="text/javascript" src="/js/lib/dummy.js"></script>

  

  

  

  
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  

  

  <style type="text/css">
    #picker {
  display: inline-block;
  width: 60px;
  height: 60px;
  border: 2px solid gray;
}
  </style>

  <title></title>

  
    













<script type="text/javascript">
window.onload=function(){

var parent = document.querySelector('#picker');
var picker = new Picker(parent);
picker.onChange = function(color) {
		var curColor = color.rgbaString;
    parent.style.background = curColor;
    document.body.style.background = curColor;
    localStorage.setItem('backcolor', curColor);
};

var curColor = localStorage.getItem('backcolor')
if(curColor) {
	document.body.style.background = curColor;
}


}




</script>

  
</head>

<body>
  <script src="https://unpkg.com/vanilla-picker@2"></script>
<div id="picker">
 
</div>
 
  
  <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "a8039mm7"
    }], "*")
  }
</script>

</body>

</html>