JSFiddle - React, Tailwind, and code Playground
HTML
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table align="center" class="container float-center">
<tbody>
<tr>
<td>
<table style=" background-color: #386ED9; background-image: url('../assets/img/bg.jpg'); background-position: 50% 50%;
background-repeat: no-repeat; " class="row">
<tbody>
<tr>
<th class="small-6 large-6 columns first">
<table>
<tbody>
<tr>
<th>
<table class="spacer">
<tbody>
<tr>
<td height="16" style="font-size:16px;line-height:16px;"> </td>
</tr>
</tbody>
</table>
<img class="logo_custom" src="../assets/img/logo.png" width="153" height="35" alt="text">
</th>
</tr>
</tbody>
</table>
</th>
<th class="small-6 large-6 columns last">
<table>
<tbody>
<tr>
<th>
<p class="logo_text text-right">View in Browser</p>
</th>
</tr>
</tbody>
</table>
</th>
</tr>
<tr>
<center>
<td class="center_top float-center" align="center">
<p class="main_text text-center">Dear...
CSS
.logo_custom {
padding-left: 50px;
}
.logo_text {
white-space: nowrap;
padding-top: 23px;
padding-right: 50px;
text-align: right;
letter-spacing: -0.02em;
text-decoration-line: underline;
color: #F5F5F5;
}
.center_top {
width: 100%;
align-items: center;
margin: 0 auto;
}