JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);   context.bezierCurveTo(250, 180, 320, 180, 340, 150);   context.bezierCurveTo(420, 150, 420, 120, 390, 100);   context.bezierCurveTo(430, 40, 370, 30, 340, 50);   context.bezierCurveTo(320, 5, 250, 20, 250, 50);   context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath(); 
context.lineWidth = 5;     
context.fillStyle = "#8ED6FF"; 
context.strokeStyle = "#0000ff";     
context.shadowColor = "#000000";
context.shadowBlur    = 5;
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.fill();    
context.shadowColor = 0;
context.shadowBlur    = 0;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.stroke();