JSFiddle - React, Tailwind, and code Playground
by Calvin Tomkins
HTML
<table width="100%" bgcolor="#cccccc">
<tr>
<td></td>
<td width="600">
<table width="100%">
<tr>
<td><img src="http://bakerite.co.uk/img/logos.png"></td>
<td></td>
<td align="right" width="100">View Online</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<table width="100%" bgcolor="#ffffff">
<tr>
<td></td>
<td width="600">
<table width="100%">
<tr>
<td><h1>Premium Cassava Flour</h1></td>
</tr>
<tr>
<td><p>Our Premium Cassava Flour delivers baking performance characteristics that closely mimics the structure, texture, and taste of numerous wheat-based products with a single ingredient</p></td>
</tr>
<tr>
<td><img src="http://bakerite.co.uk/img/maize_starch_main_edited.jpg" width="100%"></td>
</tr>
</table>
<table width="100%">
<tr>
<td style="width: 300px; padding-right: 20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.</p>
</td>
<td>
<table width="100%" style="background-color:#f2f2f2; border: 1px solid #d9d9d9;">
<tr>
<td style="padding: 10px">
<h2 style="padding: 5px 0;">Header Thing</h2>
<table>
<tr>
<td>Just a Plain Link</td>
</tr>
</table>
<hr>
<table>
...
CSS
* {
margin: 0;
font-family: "Helvetica","Arial",sans-serif;
}
h1 {
margin: 7px 0;
font-size: 40px;
font-weight: normal;
}
p {
text-align: justify;
}
a {
padding: 5px 0;
}
hr {
padding: 10px 0;
border-left: 0px;
}