JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script id="processingcode" type="application/processing">
    
void setup() {
    size(window.innerWidth, window.innerHeight);
    background(#FD8989);
    }  
    
void draw() {
    println(frameRate);
    if(!window.draw)
    {
      background(#FD8989);
    }
    noStroke();
    int rectX = window.rectX;
    int rectY = window.rectY;
    fill(#FFFFFF);
    rect(rectX, rectY, 55, 55);  
    if(window.text.length() < 1)
 {
    window.text="Enter some text!";
    }
        
    if(window.drawText && !window.draw)
    {
    fill(0);
    text(window.text,rectX,rectY+22.5);
    }
    }

    

</script>

<canvas id="canvas1"> </canvas>

<script type="text/javascript">

window.rectX = 10;
window.rectY = 10;
window.draw = false;
window.text = "Hello World!";
window.drawText = false;
window.crazy = false;

window.onload = function() {
  var gui = new dat.GUI();
  gui.add(window, 'rectX', 0, window.innerWidth - 55);
    gui.add(window, 'rectY', 0, window.innerHeight - 55);
    gui.add(window, 'draw');
    gui.add(window, 'text');
    gui.add(window, 'drawText');
};
    
</script>

CSS

body{
    overflow:hidden;
    background-color: #FD8989;
}
canvas{
    position:absolute;
    left:0;
}
.dg.main.a{
       -webkit-user-select: none;  
      -moz-user-select: none;    
      -ms-user-select: none;      
      -o-user-select: none;
      user-select: none;  
}
.close-button{
    cursor:ew-resize !important;
}