JSFiddle - React, Tailwind, and code Playground
by matox
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
<meta name="format-detection" content="telephone=no"/>
<style>
/* Reset styles */
body {
margin: 0;
padding: 0;
min-width: 100%;
width: 100% !important;
height: 100% !important;
font-family: Verdana, Geneva, sans-serif;
}
body, table, td, div, p, a {
-webkit-font-smoothing: antialiased;
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
line-height: 100%;
}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
border-collapse: collapse !important;
border-spacing: 0;
}
img {
border: 0;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
#outlook a {
padding: 0;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
/* Rounded corners for advanced mail clients only */
@media all and (min-width: 560px) {
.container {
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
...