JSFiddle - React, Tailwind, and code Playground

by Murali Kaliappan

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Reference File</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Bootstrap 5 CDN -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        addImage();
        $("#title").on("input", function() {
          $("svg #chart-title").html($(this).val() || "U.S Solar Employment Growth");
         })
      });

      function addImage() {
      	let svgImage = '<svg aria-hidden="false" aria-label="Interactive chart" viewBox="0 0 600 400" height="400" width="600" xmlns="http://www.w3.org/2000/svg" style="font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, sans-serif; font-size: 1rem;" class="highcharts-root" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><desc aria-hidden="true">Created with Highcharts 12.2.0</desc><defs aria-hidden="true"><filter id="highcharts-drop-shadow-1"><fedropshadow stdDeviation="2.5" flood-opacity="0.75" flood-color="#000000" dy="1" dx="1"></fedropshadow></filter><clipPath id="highcharts-v102ghj-116-"><rect fill="none" height="292" width="303" y="0" x="0"></rect></clipPath></defs><rect aria-hidden="true" ry="0" rx="0" height="400" width="600" y="0" x="0" filter="none" class="highcharts-background" fill="#ffffff"></rect><rect aria-hidden="true" filter="none" height="292" width="303" y="63" x="79" class="highcharts-plot-background" fill="none"></rect><g aria-hidden="true" data-z-index="1" class="highcharts-grid highcharts-xaxis-grid"><path opacity="1" d="M 81.5 63 L 81.5 355" class="highcharts-grid-line" data-z-index="1" stroke-dasharray="none"...