cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="center" valign="top" style="padding:25px 25px 25px 25px;">
      <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
        <tr>
          <td align="center" valign="top">
            <form action="http://tabletrtd.com/email-build/" name="form" method="get" target="_blank">
              <input type="radio" class="S" name="S1" id="S1C0" value="S1C0" style="display:none !important;" checked="checked">
              <input type="radio" class="S" name="S1" id="S1C1" value="S1C1" style="display:none !important;">
              <input type="radio" class="S" name="S1" id="S1C2" value="S1C2" style="display:none !important;">
              <input type="radio" class="S" name="S1" id="S1C3" value="S1C3" style="display:none !important;">
              <input type="radio" class="S" name="S1" id="S1C4" value="S1C4" style="display:none !important;">
              <input type="radio" class="S" name="S1" id="S1C5" value="S1C5" style="display:none !important;">
              <input type="radio" class="S" name="S1" id="S1C6" value="S1C6" style="display:none !important;">
              <input type="radio" class="S" name="S2" id="S2C0" value="S2C0" style="display:none !important;" checked="checked">
              <input type="radio" class="S" name="S2" id="S2C1" value="S2C1" style="display:none !important;">
              <input type="radio" class="S" name="S2" id="S2C2" value="S2C2" style="display:none !important;">
              <input type="radio" class="S" name="S2" id="S2C3" value="S2C3" style="display:none !important;">
              <input type="radio" class="S" name="S2" id="S2C4" value="S2C4" style="display:none !important;">
              <input type="radio" class="S" name="S2" id="S2C5" value="S2C5" style="display:none !important;">
              <input type="radio" class="S" name="S2" id="S2C6" value="S2C6" style="display:none !important;">
              <input type="radio" class="S" name="S3" id="S3C0" value="S3C0" style="display:none !important;" checked="checked">
              <input type="radio" class="S" name="S3" id="S3C1" value="S3C1" style="display:none !important;">
              <input type="radio" class="S" name="S3" id="S3C2" value="S3C2" style="display:none !important;">
              <input type="radio" class="S" name="S3" id="S3C3" value="S3C3" style="display:none !important;">
              <input type="radio" class="S" name="S3" id="S3C4" value="S3C4" style="display:none !important;">
              <input type="radio" class="S" name="S3" id="S3C5" value="S3C5" style="display:none !important;">
              <input type="radio" class="S" name="S3" id="S3C6" value="S3C6" style="display:none !important;">
              <input type="radio" class="S" name="S4" id="S4C0" value="S4C0" style="display:none !important;" checked="checked">
              <input type="radio" class="S" name="S4" id="S4C1" value="S4C1" style="display:none !important;">
              <input type="radio" class="S" name="S4" id="S4C2" value="S4C2" style="display:none !important;">
              <input type="radio" class="S" name="S4" id="S4C3" value="S4C3" style="display:none !important;">
              <input type="radio" class="S" name="S4" id="S4C4" value="S4C4" style="display:none !important;">
              <input type="radio" class="S" name="S4" id="S4C5" value="S4C5" style="display:none !important;">
              <input type="radio" class="S" name="S4" id="S4C6" value="S4C6" style="display:none !important;">
              <input type="radio" class="S" name="S5" id="S5C0" value="S5C0" style="display:none !important;" checked="checked">
              <input type="radio" class="S" name="S5" id="S5C1" value="S5C1" style="display:none !important;">
              <input type="radio" class="S" name="S5" id="S5C2" value="S5C2" style="display:none !important;">
              <input type="radio" class="S" name="S5" id="S5C3" value="S5C3" style="display:none !important;">
              <input type="radio" class="S" name="S5" id="S5C4" value="S5C4" style="display:none !important;">
              <input type="radio" class="S" name="S5" id="S5C5" value="S5C5" style="display:none !important;">
              <input type="radio" class="S" name="S5" id="S5C6" value="S5C6" style="display:none !important;">
              <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td align="center" valign="top">
                    <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; mso-line-height-rule:exactly; line-height:14px; color:#3a3a3a; padding:0 20px 20px 20px;">Preheader</td>
                      </tr>
                    </table>
                    <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="240">
                            <tr>
                              <td align="center" valign="top">
                                <table class="widthAuto" cellpadding="0" cellspacing="0" border="0" width="100%">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 20px 20px 20px;"><img src="http://placehold.it/200x40" alt="" width="200" height="40" border="0" style="display:block;" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="160">
                            <tr>
                              <td align="center" valign="top">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td class="paddingRightLeft10" align="left" valign="top" style="padding:0 10px 20px 0;"><img src="http://placehold.it/40x40" alt="" width="40" height="40" border="0" style="display:block;" /></td>
                                    <td class="paddingRightLeft10" align="left" valign="top" style="padding:0 10px 20px 0;"><img src="http://placehold.it/40x40" alt="" width="40" height="40" border="0" style="display:block;" /></td>
                                    <td class="paddingRightLeft10" align="left" valign="top" style="padding:0 20px 20px 0;"><img src="http://placehold.it/40x40" alt="" width="40" height="40" border="0" style="display:block;" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="410">
                            <tr>
                              <td class="paddingRightNone" align="center" valign="top" style="padding:0 10px 20px 0;">
                                <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="400">
                                  <tr>
                                    <td class="S1C0" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-07.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S1C1" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-01.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S1C2" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-02.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S1C3" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-03.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S1C4" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-04.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S1C5" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-05.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S1C6" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-06.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="200">
                            <tr>
                              <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:0 20px 10px 20px;">Module 1 &nbsp; <label for="S1C0" style="color:#e68578; text-decoration:underline; font-size:11px;">clear</label></td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 4px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS1C1" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S1C1" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Headline</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS1C2" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S1C2" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">CTA</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS1C3" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S1C3" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Body Copy</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 20px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS1C4" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S1C4" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS1C5" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S1C5" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Left</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS1C6" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S1C6" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Right</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="410">
                            <tr>
                              <td class="paddingRightNone" align="center" valign="top" style="padding:0 10px 20px 0;">
                                <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="400">
                                  <tr>
                                    <td class="S2C0" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-08.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S2C1" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-01.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S2C2" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-02.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S2C3" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-03.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S2C4" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-04.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S2C5" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-05.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S2C6" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-06.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="200">
                            <tr>
                              <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:0 20px 10px 20px;">Module 2 &nbsp; <label for="S2C0" style="color:#e68578; text-decoration:underline; font-size:11px;">clear</label></td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 4px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS2C1" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S2C1" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Headline</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS2C2" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S2C2" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">CTA</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS2C3" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S2C3" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Body Copy</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 20px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS2C4" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S2C4" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS2C5" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S2C5" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Left</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS2C6" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S2C6" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Right</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="410">
                            <tr>
                              <td class="paddingRightNone" align="center" valign="top" style="padding:0 10px 20px 0;">
                                <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="400">
                                  <tr>
                                    <td class="S3C0" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-09.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S3C1" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-01.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S3C2" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-02.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S3C3" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-03.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S3C4" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-04.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S3C5" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-05.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S3C6" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-06.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="200">
                            <tr>
                              <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:0 20px 10px 20px;">Module 3 &nbsp; <label for="S3C0" style="color:#e68578; text-decoration:underline; font-size:11px;">clear</label></td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 4px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS3C1" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S3C1" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Headline</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS3C2" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S3C2" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">CTA</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS3C3" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S3C3" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Body Copy</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 20px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS3C4" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S3C4" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS3C5" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S3C5" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Left</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS3C6" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S3C6" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Right</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="410">
                            <tr>
                              <td class="paddingRightNone" align="center" valign="top" style="padding:0 10px 20px 0;">
                                <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="400">
                                  <tr>
                                    <td class="S4C0" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-10.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S4C1" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-01.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S4C2" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-02.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S4C3" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-03.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S4C4" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-04.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S4C5" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-05.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S4C6" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-06.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="200">
                            <tr>
                              <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:0 20px 10px 20px;">Module 4 &nbsp; <label for="S4C0" style="color:#e68578; text-decoration:underline; font-size:11px;">clear</label></td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 4px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS4C1" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S4C1" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Headline</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS4C2" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S4C2" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">CTA</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS4C3" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S4C3" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Body Copy</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 20px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS4C4" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S4C4" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS4C5" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S4C5" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Left</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS4C6" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S4C6" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Right</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="410">
                            <tr>
                              <td class="paddingRightNone" align="center" valign="top" style="padding:0 10px 20px 0;">
                                <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="400">
                                  <tr>
                                    <td class="S5C0" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-11.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S5C1" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-01.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S5C2" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-02.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S5C3" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-03.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S5C4" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-04.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S5C5" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-05.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                  <tr>
                                    <td class="S5C6" align="center" valign="top" style="border:1px solid #cccccc; display:none;"><img src="http://tabletrtd.com/codepen/email-builder-06.jpg" alt="" width="398" height="auto" border="0" style="display:block;" class="photo" /></td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                          <table align="left" class="widthFull" cellpadding="0" cellspacing="0" border="0" width="200">
                            <tr>
                              <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:0 20px 10px 20px;">Module 5 &nbsp; <label for="S5C0" style="color:#e68578; text-decoration:underline; font-size:11px;">clear</label></td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 4px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS5C1" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S5C1" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Headline</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS5C2" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S5C2" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">CTA</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS5C3" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S5C3" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Body Copy</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                            <tr>
                              <td align="center" valign="top" style="padding:0 0 20px 0;">
                                <table cellpadding="0" cellspacing="0" border="0">
                                  <tr>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS5C4" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S5C4" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS5C5" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S5C5" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Left</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                    <td align="left" valign="top" style="padding:0 2px 0 2px;">
                                      <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                          <td class="choiceS5C6" width="60" height="60" align="center" valign="middle" style="font-family:Arial, Helvetica, sans-serif; font-size:9px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0; border:1px solid #cccccc;"><strong><label for="S5C6" style="color:#3a3a3a; text-decoration:none; display:block; padding:19px 0 19px 0;">Image Right</label></strong></td>
                                        </tr>
                                      </table>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                    <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="610">
                      <tr>
                        <td align="left" valign="top">
                          <table class="widthMobile" cellpadding="0" cellspacing="0" border="0" width="400">
                            <tr>
                              <td align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; mso-line-height-rule:exactly; line-height:14px; color:#3a3a3a; padding:0 20px 20px 20px;"><a href="tbd" target="_blank" style="color:#3a3a3a; text-decoration:underline;">Terms</a> |
                                <a href="tbd" target="_blank" style="color:#3a3a3a; text-decoration:underline;">Policies</a> |
                                <a href="tbd" target="_blank" style="color:#3a3a3a; text-decoration:underline;">Preferences</a> |
                                <a href="tbd" target="_blank" style="color:#3a3a3a; text-decoration:underline;">Unsubscribe</a>
                              </td>
                            </tr>
                            <tr>
                              <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:11px; mso-line-height-rule:exactly; line-height:14px; color:#3a3a3a; padding:0 20px 20px 20px;">&copy; 2017. Header provider strategic consulting support conversation advertisements policy promotional request. Option purpose programming intentional logo color account correct user&nbsp;rates.</td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
              <table class="widthFull" cellpadding="0" cellspacing="0" border="0" width="610">
                <tr>
                  <td align="center" valign="middle" height="42" style="font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:22px; color:#ffffff; padding:0 0 0 0;"><input type="submit" id="export" value="GO TO EMAIL BUILDER" target="_blank" style="font-size:18px; color:#ffffff; text-decoration:none; display:block; padding:10px 10px 10px 10px; background-color:#3a3a3a; border:none; width:100%; font-weight:bold; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none;"></td>
                </tr>
              </table>
            </form>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
            
          
!
            
              body {
  background-color: #ffffff;
}
input.S {
  display: none;
}
label, input {
  cursor: pointer;
}
@media only screen and (max-width: 610px), only screen and (max-device-width: 610px) {
  .widthMobile {
    width: 320px !important;
  }
  .widthFull {
    width: 100% !important;
  }
  .widthAuto {
    width: auto !important;
  }
  .photo {
    width: 100% !important;
    height: auto !important;
  }
  .paddingRightNone {
    padding-right: 0 !important;
  }
  .paddingRightLeft10 {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}
#S1C1:checked~* .choiceS1C1, #S1C2:checked~* .choiceS1C2, #S1C3:checked~* .choiceS1C3, #S1C4:checked~* .choiceS1C4, #S1C5:checked~* .choiceS1C5, #S1C6:checked~* .choiceS1C6, #S2C1:checked~* .choiceS2C1, #S2C2:checked~* .choiceS2C2, #S2C3:checked~* .choiceS2C3, #S2C4:checked~* .choiceS2C4, #S2C5:checked~* .choiceS2C5, #S2C6:checked~* .choiceS2C6, #S3C1:checked~* .choiceS3C1, #S3C2:checked~* .choiceS3C2, #S3C3:checked~* .choiceS3C3, #S3C4:checked~* .choiceS3C4, #S3C5:checked~* .choiceS3C5, #S3C6:checked~* .choiceS3C6, #S4C1:checked~* .choiceS4C1, #S4C2:checked~* .choiceS4C2, #S4C3:checked~* .choiceS4C3, #S4C4:checked~* .choiceS4C4, #S4C5:checked~* .choiceS4C5, #S4C6:checked~* .choiceS4C6, #S5C1:checked~* .choiceS5C1, #S5C2:checked~* .choiceS5C2, #S5C3:checked~* .choiceS5C3, #S5C4:checked~* .choiceS5C4, #S5C5:checked~* .choiceS5C5, #S5C6:checked~* .choiceS5C6 {
  border:1px solid #e68578 !important;
}
#S1C0:checked~* .S1C0, #S1C1:checked~* .S1C1, #S1C2:checked~* .S1C2, #S1C3:checked~* .S1C3, #S1C4:checked~* .S1C4, #S1C5:checked~* .S1C5, #S1C6:checked~* .S1C6, #S2C0:checked~* .S2C0, #S2C1:checked~* .S2C1, #S2C2:checked~* .S2C2, #S2C3:checked~* .S2C3, #S2C4:checked~* .S2C4, #S2C5:checked~* .S2C5, #S2C6:checked~* .S2C6, #S3C0:checked~* .S3C0, #S3C1:checked~* .S3C1, #S3C2:checked~* .S3C2, #S3C3:checked~* .S3C3, #S3C4:checked~* .S3C4, #S3C5:checked~* .S3C5, #S3C6:checked~* .S3C6, #S4C0:checked~* .S4C0, #S4C1:checked~* .S4C1, #S4C2:checked~* .S4C2, #S4C3:checked~* .S4C3, #S4C4:checked~* .S4C4, #S4C5:checked~* .S4C5, #S4C6:checked~* .S4C6, #S5C0:checked~* .S5C0, #S5C1:checked~* .S5C1, #S5C2:checked~* .S5C2, #S5C3:checked~* .S5C3, #S5C4:checked~* .S5C4, #S5C5:checked~* .S5C5, #S5C6:checked~* .S5C6 {
  display: block !important;
}
            
          
!
999px
Loading ..................

Console