JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<script>
          console.log("Collin.. the 'this' object is the parent of the script tag...",this)
          console.log("we can use it as an anchor to query for the raw html elements", this.querySelector("div").outerHTML);
          
          //the only other thing we inject into the object is this.app 
          //as it lets us set up methods for others to call
          
          let  topLeftBorderRadius = this.querySelector(".top.left.border-radius-display");
          let  topRighttBorderRadius = this.querySelector(".top.right.border-radius-display");
          let  bottomLeftBorderRadius = this.querySelector(".bottom.left.border-radius-display");
          let  bottomRightBorderRadius = this.querySelector(".bottom.right.border-radius-display");
          
          let  topBorderWidth = this.querySelector(".top.border-width-display");
          let  bottomBorderWidth = this.querySelector(".bottom.border-width-display");
          let  leftBorderWidth = this.querySelector(".left.border-width-display");
          let  rightBorderWidth = this.querySelector(".right.border-width-display");

          let border = this.querySelector(".border");

          this.app.setTopLeftBorderRadius = (value)=>{
              topLeftBorderRadius.textContent = value;
          }
          this.app.setTopRightBorderRadius = (value)=>{
              topRighttBorderRadius.textContent = value;
          }
          this.app.setBottomLeftBorderRadius = (value)=>{
              bottomLeftBorderRadius.textContent = value;
          }
          this.app.setBottomRightBorderRadius = (value)=>{
              bottomRightBorderRadius.textContent = value;
          }
          
          this.app.setTopBorderWidth = (value)=>{
              topBorderWidth.textContent = value;
          }
          this.app.setBottomBorderWidth = (value)=>{
              bottomBorderWidth.textContent = value;
          }
          this.app.setLeftBorderWidth = (value)=>{
             ...

CSS

html{
  width:100%;
  height:200px;
  background-color:#c1c1c1;
  overflow: visible;              
}

*{
  /* box-sizing:border-box; */
}