JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<!-- Created with Ai->Canvas Export Plug-In Version 1.0 (Mac) -->
<!-- By Mike Swanson (http://blogs.msdn.com/mswanson/)        -->
<!-- and MIX Online  (http://visitmix.com/)                   -->

<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>egg</title>
  <script>

    function init() {

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      draw(ctx);
    }

    function draw(ctx) {

      // layer1/Path
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(100.0, 90.0);
      ctx.bezierCurveTo(100.0, 95.5, 95.5, 100.0, 90.0, 100.0);
      ctx.lineTo(10.0, 100.0);
      ctx.bezierCurveTo(4.5, 100.0, 0.0, 95.5, 0.0, 90.0);
      ctx.lineTo(0.0, 10.0);
      ctx.bezierCurveTo(0.0, 4.5, 4.5, 0.0, 10.0, 0.0);
      ctx.lineTo(90.0, 0.0);
      ctx.bezierCurveTo(95.5, 0.0, 100.0, 4.5, 100.0, 10.0);
      ctx.lineTo(100.0, 90.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(229, 229, 229)";
      ctx.fill();

      // layer1/Path
      ctx.beginPath();
      ctx.moveTo(10.0, 28.0);
      ctx.bezierCurveTo(10.0, 37.9, 18.1, 46.0, 28.0, 46.0);
      ctx.bezierCurveTo(37.9, 46.0, 46.0, 37.9, 46.0, 28.0);
      ctx.bezierCurveTo(46.0, 18.1, 37.9, 10.0, 28.0, 10.0);
      ctx.bezierCurveTo(18.1, 10.0, 10.0, 18.1, 10.0, 28.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 191, 30)";
      ctx.fill();
      ctx.restore();
    }
  </script>
 </head>
 <body onload="init()">
   <canvas id="canvas" width="100" height="100"></canvas>
 </body>
</html>