<div class="container">
  <div class="toolbar"></div>
  <div class="email">
    <table style="background-color: #f9f9fb; width: 100%;" border="0">
      <tr>
        <td align="center">
          <table border="0" width="100%" style="max-width: 660px; width: 100%; background-color: #ffffff; border: 2px solid #eee; border-radius: 8px; overflow: hidden" cellpadding="0" cellspacing="0">
            <tr>
              <td style="padding: 16px 64px 0;">
                <div class="tinymce" id="editor-1" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
                  <p>Hey ${Contact.FirstName},</p>
                  <h1 style="font-size: 24px; color: rgb(51, 93, 255);">What's your email editing project?</h1>
                  <p>Are you:</p>
                  <p><strong>Building a new email client</strong> (i.e. the next Gmail) and need rich text editor functionality?</p>
                  <p><strong>Building email marketing software</strong> (i.e. the next Mail Chimp) and need to add more rich text editor functionality, or enhance the default editor?</p>
                  <p>Then use the only WYSIWYG editor that is trusted by 1.5M developers.</p>
                  <p><a style="background-color: rgb(51, 93, 255); padding: 12px 16px; color: rgb(255, 255, 255); border-radius: 4px; text-decoration: none; display: inline-block;" href="https://tiny.cloud/pricing">Get started with your 14-day free trial</a></p>
                </div>
              </td>
            </tr>
            <tr>
              <td style="padding: 0 64px 16px;">
                <table border="0" style="width: 100%;">
                  <tr>
                    <td style="width: 48%; vertical-align: top;">
                      <div class="tinymce" id="editor-2" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
                        <p><img src="https://img.icons8.com/doodle/96/000000/critical-thinking.png" alt="" width="96" height="96"></p>
                        <h2 style="font-size: 18px;">Curious about TinyMCE?</h2>
                        <p>Play with this demo to see how our email WYSIWYG editor works.</p>
                      </div>
                    </td>
                    <td style="width: 4%"></td>
                    <td style="width: 48%; vertical-align: top;">
                      <div class="tinymce" id="editor-3" style="font-family: 'helvetica', sans-serif; color: #243376; font-size: 16px; line-height: 1.5;">
                        <p><img src="https://img.icons8.com/doodle/96/000000/electrical--v1.png" width="96" height="96"></p>
                        <h2 style="font-size: 18px;">Try Premium plugins</h2>
                        <p>Sign up for a 14-day trial and try out all our premium plugins.</p>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td style="background-color: #eff0f6; padding: 24px 64px;">
                <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;"><a href="#" style="color: #a0a9c5;">Update your email preferences</a> or <a href="#" style="color: #a0a9c5;">unsubscribe</a>.</p>
                <p style="margin: 0; font-family: 'helvetica'; font-size: 12px; color: #a0a9c5;">Tiny Technologies | 2100 Geng Road, Palo Alto, CA 94303 USA</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</div>

    /* Page and email layout */
    body {
        padding: 0;
        margin: 0;
        box-sizing: border-box;

    }

    .container {
        background-color: #f9f9fb;
        margin: 0 auto;
        max-width: 1000px;
    }

    .email {
        max-width: 840px;
        margin: auto;
    }

    /* Add blue "focus" effect to the active editor */
    .tinymce:focus {
        border-radius: 0.5px;
        box-shadow: 0 0 0 4px #fff, 0 0 0 7px #99afff;
        outline: 0;
    }

    /* TinyMCE toolbar tweaks */
    
    /* Style the toolbar */
    .toolbar {
      background-color: #f9f9fb;
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      z-index: 1;
      margin: 0 auto;
      max-width: 660px;
      border-radius: 10px;
    }

    /* On tablet and larger devices, show a toolbar placeholder when
      there is no active editor selected (the editor loses focus).
      This is a screenshot of the toolbar, but with a "disabled"
      grey affect applied to the buttons to indicate they are not
      active. If you change the toolbar layout, create a screenshot.
      Alternatively, you could remove this CSS rule and make the
      toolbar disappear when the editor loses focus. */
    @media screen and (min-width: 768px) {
      .toolbar {
        height: 42px;
        min-height: 82px;
        outline: 2px solid #eee;
        outline-offset: -2px; 
        background: url("https://i.ibb.co/GM53SBk/disabled-toolbar-tutorial.png") no-repeat center center / contain;
      } 
    }

    /* Ensure that when empty space on the toolbar is clicked, it does not blur the editor */
    .tox-toolbar__group:last-of-type {
      flex-grow: 1;
    }