JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head></head>
  <body>
    <input id="name" value="aaaa" />
    <input id="type" value="bbbb" />
    <textarea>textarea</textarea>
    <div>
      <a href="#" onclick="downloadHTML()">Download HTML</a>
    </div>
    <div>
      <a href="#" onclick="appendElements()">Append Elements</a>
    </div>
    <script>
      function appendElements() {
        var ul = document.createElement("ul");
        for (var i = 0; i < 3; i++) {
          var li = document.createElement("li");
          li.appendChild(document.createTextNode("LI " + (i + 1)));
          ul.appendChild(li);
        }
        document.body.appendChild(ul);

        var div = document.createElement("div");
        div.appendChild(document.createTextNode("My DIV"));
        document.body.appendChild(div);
      }

      function downloadHTML() {
        var anchor = document.querySelector("a");
        anchor.setAttribute(
          "href",
          "data:text/html;charset=UTF-8," +
            encodeURIComponent(document.documentElement.outerHTML)
        );
        anchor.setAttribute("download", "index.html");
      }
      var inputs = document.getElementsByTagName("input");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("change", function(ev) {
          var input = ev.target;
          input.setAttribute("value", input.value);
        });
      }
    </script>
  </body>
</html>