JSFiddle - React, Tailwind, and code Playground
by Salmin Skenderovic
JavaScript
const result = `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"><head><meta name="viewport" content="width=device-width"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" media="screen"/><title>Proofpoint Notification</title><style>.pfpt-notification p, .pfpt-notification h1, .pfpt-notification a, .pfpt-notification td, .pfpt-notification p, .pfpt-notification h2{font-family: Roboto, Helvetica, Arial, sans-serif !important;}.pfpt-incident-low{display: inline-block; background: #90a4ae; height: 8px; width: 8px; border-radius: 50px; margin-right: 6px;}.pfpt-incident-med{display: inline-block; background: #fb8c00; height: 8px; width: 8px; border-radius: 50px; margin-right: 6px;}.pfpt-incident-high{display: inline-block; background: #ef5350; height: 8px; width: 8px; border-radius: 50px; margin-right: 6px;}.pfpt-incident-severe{display: inline-block; background: #c62828; height: 8px; width: 8px; border-radius: 50px; margin-right: 6px;}.pfpt-rules-details{border-bottom: 1px solid #dfdfdf;}.pfpt-rules-details:last-of-type{border-bottom: none;}@media only screen and (max-width: 579px){.header-table{margin-top: 0 !important;} }</style></head><body style=" margin: 0; padding: 0; min-width: 100%; background-color: #f5f5f5; box-sizing: border-box; margin: 0 !important; padding: 0 !important; " class="pfpt-notification" ><table width="100%" border="0" cellpadding="0" cellspacing="0"...