JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" onclick="div2html()">Save HTML</button>
<br>
<br>
<div style="border: 1px solid">
    <div id="div2save">
        <p class="bigbold">bla
            <p>
    </div>
</div>

CSS

.bigbold {
    font-weight: bold;
    font-size: 20px;
}

JavaScript

function div2html() {
    var inner = document.getElementById("div2save");
    var style = window.getComputedStyle(inner.children[0]).cssText;
    var html = "<html><head><style>" 
               + "." + inner.children[0].className 
               + "{" + style + "}" 
               + "</style></head><body>" 
               + inner.innerHTML + "</body></html>";
    saveTextAsFile("div2html.html", html);
}


function saveTextAsFile(fileNameToSaveAs, textToWrite) {
    var ie = navigator.userAgent.match(/MSIE\s([\d.]+)/),
        ie11 = navigator.userAgent.match(/Trident\/7.0/) && navigator.userAgent.match(/rv:11/),
        ieEDGE = navigator.userAgent.match(/Edge/g),
        ieVer = (ie ? ie[1] : (ie11 ? 11 : (ieEDGE ? 12 : -1)));

    if (ie && ieVer < 10) {
        console.log("No blobs on IE ver<10");
        return;
    }

    var textFileAsBlob = new Blob([textToWrite], {
        type: 'text/plain'
    });

    if (ieVer > -1) {
        window.navigator.msSaveBlob(textFileAsBlob, fileNameToSaveAs);

    } else {
        var downloadLink = document.createElement("a");
        downloadLink.download = fileNameToSaveAs;
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = function (e) {
            document.body.removeChild(e.target);
        };
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
        downloadLink.click();
    }
}