JSFiddle - React, Tailwind, and code Playground
by Renata Oliveira
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.imgSize {
height: auto !important;
width: 100%;
}
@media only screen and (max-width: 460px) {
.tdPadding {
padding-top: 44px !important; padding-bottom: 44px !important; padding-left: 24px !important; padding-right: 24px !important;
}
.colTabelaImg {
display: block !important;
width: 100% !important;
}
.colPaddingImg {
padding: 0px !important;
}
}
</style>
</head>
<body style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table class="tableHeight" border="0" cellpadding="0" cellspacing="0" style="background-color: #f6f6f6; width: 100%; height: 1800px; border-collapse: separate; border-spacing: 0 1em; mso-table-lspace: 0; mso-table-rspace: 0;">
<tr>
<td style="vertical-align: top;">
<div style="background: #19ab6c; max-height: 216px; height: 216px; padding: 0 16px;">
<table style="border-collapse: separate; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%;">
<tr>
<td style="padding: 64px 0 48px; vertical-align: top; text-align: left !important; display: block; max-width: 600px; margin-left: auto; margin-right: auto;">
<table style="border-collapse: separate; mso-table-lspace: 0; mso-table-rspace: 0; width: 100%;">
<tr>
<td style="vertical-align: top; width: 300px;">
<img src="http://cdn.toroinvestimentos.com.br/tororadar/images/email/logo-toro-radar-2x.png" height="33px" width="156px" alt="" border="0" style="border: none; -ms-interpolation-mode: bicubic; max-width: 100%;">
</td>
...