JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" ,cellpaddng="0" style="background-color:#EEE; margin: 0; padding: 0;" >
<tr>
<td colspan="3" height="7px"></td>
</tr>
<tr>
<td></td>
<td width="650">
<table width="100%" align="center">
<tr>
<td bgcolor="#ffffff">
<table width="100%">
<tr>
<td><img src="http://www.bakerite.co.uk/img/logos.png" /></td>
<td align="center" width="160" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; padding: 7px; color: #333333;">Free Phone: 0800 999 8876</td>
<td align="center" bgcolor="#ec4c4c" width="100" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold; padding: 7px; color: #ffffff;">Web Version</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#cccccc">
<table width="100%" cellspacing="0" style="background-image:url('http://www.bakerite.co.uk/img/flyers/main.jpg'); background-repeat:no-repeat; background-size:contain; background-position:center; border-collapse: collapse; margin: 0; padding: 0;">
<tr>
<td width="5%" cellpadding="0" style="border-collapse: collapse;">
<img src="http://www.bakerite.co.uk/img/flyers/blank6.png" width="100%" style="padding: 0; margin: 0; display: block;" />
</td>
<td cellpadding="0" width="90%" style="border-collapse: collapse;">
<div style="font-size: 4em; font-weight: bold; color: #fff;" align="center" valign="middle">MAIZE FLOUR</div>
<div style="font-size: 2.5em; font-weight: bold; color: #fff;" align="center" valign="middle">WHOLE GRAIN</div>
</td>
<td width="5%" cellpadding="0" style="border-collapse: collapse;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="100%" style="border-top: 2px solid #ed8000; border-bottom: 2px solid #ed8000; margin-top: 5px; margin-bottom: 5px;"><tr><td>
<p style="color: #717171; font-family: Helvetica, Arial, sans-serif; font-size: 12px;">Sed auctor finibus augue. Fusce rhoncus pellentesque commodo. Etiam sapien sem, tincidunt sit amet erat...