JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <script>
          var entityMap = {
            "&": "&amp;",
            "<": "&lt;",
            ">": "&gt;",
            '"': '&quot;',
            "'": '&#39;',
            "/": '&#x2F;'
          };
        
          function escapeHtml(string) {
            return String(string).replace(/[&<>"'\/]/g, function (s) {
              return entityMap[s];
            });
          }
        
        //document.addEventListener("DOMContentLoaded", init, false);

        window.onload = function init() 
        {
            var codeblock = document.querySelectorAll("pre code");
                    
            if(codeblock.length) 
            {
                for(var i=0, len=codeblock.length; i<len; i++) 
                {
                    var dom = codeblock[i];
                    var html = dom.innerHTML;
                    html = escapeHtml(html);
                    dom.innerHTML = html;
                }
            }
        }

    </script>
    <pre>
        <code>
               
                    <div></div>
         
        </code>
    </pre>
        
    <pre>
        <code>
            <!-- Browser thinks iostream.h is a tag while creating DOM and looks for end tag. As it did not find it, it will add a ending iostream.h tag -->
            #include <iostream.h>
            
            using namespace std;
            
            int main()
            {
                cout<<"Hello QNimate";
            }
        </code>
    </pre>
</body>