JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<button type="button" id="download-html">Download</button>
<div id="email-html">
   <table bgcolor="#F1F1F1" border="0" cellpadding="0" cellspacing="0" height="100%" id="bodyTable" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; font-size: 1em; background-color: #F1F1F1; height: 100%; width: 100%;" width="100%">
	<tbody>
		<tr>
			<td align="center" bgcolor="#f7f7f7" height="100%" id="bodyCell" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin: 0; padding: 0; height: 100%; width: 100%; background-color: #f7f7f7;" valign="top" width="100%">
			<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" id="emailBody" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; max-width: 100%; max-width: 100vw; background-color: #fff; width: 580px; border:1px solid #efefef;" width="580">
				<tbody>
					<tr>
						<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top">
						<header>
						  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" width="100%">
							<tbody>
								<tr class="container header-content">
									<td align="center" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" valign="top">
									 <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"...

JavaScript

$('#download-html').click(function () {
        downloadHtml('EmailTemplate.html', 'email-html', 'text/html');
    });

    function downloadHtml(filename, divID, fileType) {
        var content = document.getElementById(divID).innerHTML;
        var link = document.createElement('a');
        fileType = fileType || 'text/plain';
        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:' + fileType + ';charset=utf-8,' + encodeURIComponent(content));
        link.click();
    }