JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/x-serialization" data-gwd-canvas="serialization">
      {"useCanvas":1,"useWebGl":0,"data":["{\"version\":0.1,\"id\":\"1el7bq3d\",\"fov\":45,\"zNear\":0.1,\"zFar\":100,\"viewDist\":5,\"webGL\":false,\"lightAmount\":0.3,\"children\":[{\"anchors\":[[[1,0.12,0],[0.5,1.13,0],[0.5,1.13,0]],[[0.5,197.13,0],[0.5,197.13,0],[0.5,197.13,0]],[[284,199.63,0],[284,199.63,0],[284,199.63,0]],[[284,85.62,0],[284,85.62,0],[284,85.62,0]],[[114,82.62,0],[114,82.62,0],[114,82.62,0]],[[112,0.62,0],[112,0.62,0],[112,0.62,0]]],\"isClosed\":true,\"strokeWidth\":1,\"strokeColor\":[0,0,0,1],\"fillColor\":[1,1,1,1],\"type\":5,\"geomType\":5}]}"]}
    </script>
    <script data-gwd-canvas="runtime" type="text/javascript">
      // Copyright 2013 Google Inc. All Rights Reserved.
      (function(){var t=function(c,a){this.c=void 0!==c?c:0;this.d=void 0!==a?a:0};t.prototype.ceil=function(){this.c=Math.ceil(this.c);this.d=Math.ceil(this.d);return this};t.prototype.floor=function(){this.c=Math.floor(this.c);this.d=Math.floor(this.d);return this};window.addEventListener("load",function(){window.removeEventListener("load",x,!1);x()},!1);
      var x=function(){for(var c,a,h=[],d=document.querySelectorAll('[type="text/x-serialization"][data-gwd-canvas="serialization"]'),m=d.length,g=0;g<m;g++)h.push(JSON.parse(d[g].textContent));d=h.length;for(m=0;m<d;m++)for(var g=h[m].data,n=document.body,f=g.length,r=0;r<f;r++){var b=JSON.parse(g[r]);if(b.children&&1===b.children.length&&(c=b.id)&&(c=n.querySelector("canvas[data-RDGE-id='"+c+"']"))){a=c;var e=b.children[0],b=a.getContext("2d");c=a.width;a=a.height;switch(e.type){case 1:var k=e.strokeWidth;
      b.beginPath();var p=Math.ceil(k)-0.5;e.fillColor&&(b.fillStyle=y(b,e.fillColor,c,a,k,p),b.lineWidth=k,B(e,p,b,c,a),b.fill(),b.closePath());b.beginPath();p=Math.ceil(0.5*k)-0.5;e.strokeColor&&(b.strokeStyle=y(b,e.strokeColor,c,a,k,0),b.lineWidth=k,B(e,p,b,c,a),b.stroke(),b.closePath());break;case 2:var...

CSS

html, body {
        width: 100%;
        height: 100%;
        margin: 0px;
      }
      body {
        background-color: transparent;
        -webkit-transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-style: preserve-3d;
      }
      .gwd-canvas-7r56 {
        position: absolute;
        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        -webkit-transform-style: preserve-3d;
        width: 284.5px;
        height: 200.125px;
        left: 202.25px;
        top: 156.875px;
        color: rgb(0, 0, 0);
      }
      .gwd-div-g4c7 {
        position: absolute;
        width: 89px;
        height: 56px;
        left: 218px;
        top: 176px;
        font-family:'Times New Roman';
        text-align: left;
      }
      .gwd-div-9n8s {
        position: absolute;
        width: 252px;
        height: 80px;
        left: 218px;
        top: 257px;
        font-family:'Times New Roman';
        text-align: left;
      }