JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div id="email" style="width:600px;margin: auto;background:white;">
  <table role="presentation" border="0" align="right" cellspacing="0">
    <tr>
      <td>
        <a href="#" style="font-size: 9px; text-transform:uppercase; letter-spacing: 1px; color: #99ACC2;  font-family:Arial;">View in Browser</a>
      </td>
    </tr>
  </table>
  
  <!-- Header --> 
  <table role="presentation" border="0" width="100%" cellspacing="0">
  <tr>
    <td bgcolor="#00A4BD" align="center" style="color: white;">
      <img alt="Flower" src="https://hs-8886753.f.hubspotemail.net/hs/hsstatic/TemplateAssets/static-1.60/img/hs_default_template_images/email_dnd_template_images/ThankYou-Flower.png" width="400px">
      <h1 style="font-size: 52px; margin:0 0 20px 0; font-family:Arial;"> Welcome subscribers!</h1>
    </tr>
      </td>
  </table>

  <!-- Body 1 --> 
  <table role="presentation" border="0" width="100%" cellspacing="0">
     <tr>
       <td style="padding: 30px 30px 30px 60px;">
        <h2 style="font-size: 28px; margin:0 0 20px 0; font-family:Arial;"> Lorem ipsum dolor sit amet</h2>
         <p style="margin:0 0 12px 0;font-size:16px;line-height:24px;font-family:Arial">Ut eget semper libero. Vestibulum non maximus nisl, ut iaculis ante. Nunc arcu elit, cursus eget urna et, tempus aliquam eros. Ut eget semper libero. Vestibulum non maximus nisl, ut iaculis ante. Nunc arcu elit, cursus eget urna et, tempus aliquam eros.</p>
           <p style="margin:0;font-size:16px;line-height:24px;font-family:Arial;"><a href="#" style="color:#FF7A59;text-decoration:underline;">Learn more</a></p>
         </td> 
    </tr>
  </table>
  
  <!-- Body 2--> 
    <table role="presentation" border="0" width="100%" cellspacing="0">
      <tr>
          <td style="vertical-align: top;
  padding: 30px 10px 30px 60px;"> 
           <img alt="Blog" src="https://www.hubspot.com/hubfs/assets/hubspot.com/style-guide/brand-guidelines/guidelines_sample-illustration-3.svg" width="200px" align="center">
 ...