Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <style type="text/css">
    @media only screen and (max-width: 320px) {
      
      td[class="body-copy"]{
      padding-left: 5px !important;
      padding-right: 5px !important;
      font-size: 16px !important;
      line-height: 22px !important;
      font-weight: 400 !important;
      
      }
      
      td[class="main-unit-height"]{
      height: 30px !important;
      }
      
      td[class="gutter"]{
      width: 7px !important;
      }
      
      }
      
      
      @media only screen and (max-width: 420px) {
      
      img[class="video-icon"]{
      width: 40px;
      }
      
      td[class="h1"]{
      font-size:22px;
      line-height: 30px;
      }
      
      td[class="h1_header"]{
      font-size:30px;
      line-height: 40px;
      }
      
      td[class="h2"]{
      font-size:18px;
      line-height: 25px;
      }
      td[class="body-copy"]{
      font-size:16px;
      line-height: 24px;
      }
      td[class="sms-text"]{
      font-size: 22px !important;
      line-height: 32px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
      }
      td[class="top-unit-height"]{
      height: 30px !important;
      }
      td[class="sms-top-height"]{
      height: 40px !important;
      }
      td[class="btm-unit-height"]{
      height: 50px !important;
      }
      td[class="sms-btm-height"]{
      height: 50px !important;
      }
      }
      
      @media only screen and (max-width: 600px) {
      
      table[class="collapse"]{
      width:100% !important;
      }
      
      div[class="collapse"]{
      width:100% !important;
      }
      
      td[class="logo_space"]{
      height:12px !important;
      }
      
      span[class="address"]{
      display:block !important;
      width:240px !important;
      line-height:18px !important;
      }
      
      img[class="media"]{
      width: 100%;
      }
      
      }
      
      
      @media only screen and (max-width: 480px) {
      
      table[class="collapse"]{
      width:100% !important;
      }
      
      div[class="collapse"]{
      width:100% !important;
      }
      
      td[class="logo_space"]{
      height:12px !important;
      }
      
      span[class="address"]{
      display:block !important;
      width:240px !important;
      line-height:18px !important;
      }
      
      td[class="cut"]{
      display:none !important;
      }
      td[class="inline-space"]{
      width:25px !important;
      }
      td[class="hash-margin"]{
      width: 5% !important;
      }
      td[class="margins"]{
      width:5% !important;
      }
      td[class="paragraph-text"] {
      text-align: center !important;
      }	padding-bottom: 25px !important;
      }
      td[class="space"]{
      height: 7px !important;
      }
      td[class="space-420"]{
      height: 17px !important;
      }
      td[class="space-480"]{
      height: 70px !important;
      }
      td[class="cut-480"]{
      display:none !important;
      }
      td[class="btm-unit-height2"]{
      height: 60px !important;
      }
      
      }
  </style>
</head>

<body bgcolor="#f5f8fa" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
  <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#f5f8fa" style="background-color: #f5f8fa;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="body_wrapper">
    <tbody>
      <tr>
        <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
          <table class="collapse" id="header" align="center" width="680" style="width: 680px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0">
            <tbody>
              <tr>
                <td style="min-width: 680px;height: 1;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" height="1" class="cut">
                  <img src="https://ea.twimg.com/email/self_serve/media/spacer-1402696023930.png" height="1" style="min-width: 680px;height: 1px;margin: 0;padding: 0;display: block;-ms-interpolation-mode: bicubic;border: none;outline: none;margin:0;padding:0;display:block;-ms-interpolation-mode:bicubic;border:none;outline:none;"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
          <!--/////////////////// pre-header ///////////////////////////-->
          <table class="collapse" id="hide" align="center" width="680" style="width: 680px;padding: 0;margin: 0;line-height: 0;font-size: 0;display: none;max-height: 0;padding:0;margin:0;line-height:1px;font-size:1px;" bgcolor="#f5f8fa" cellpadding="0" cellspacing="0"
            border="0">
            <tbody>
              <tr>
                <td height="25" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
              <tr align="center">
                <td class="preheader" style="padding: 0px;margin: 0px;line-height: 12px;font-size: 12px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;color: #8899a6;font-weight: normal;padding:0;margin:0;line-height:1px;font-size:1px;">
                  <a href="https://twitter.com/i/redirect?url=https%3A%2F%2Fdashboard.twitter.com%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=d35c05e91065fa309ffdfb983a44784f1d4f5464&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1553"
                    style="text-decoration: none;border-style: none;border: 0;padding: 0px;margin: 0px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;color: #8899a6;font-size: 12px;font-weight: normal;line-height: 12px;text-decoration:none;border-style:none;border:0;padding:0;margin:0;">Use Dashboard to amplify your Twitter presence.</a>
                </td>
              </tr>
              <tr>
                <td height="15" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
            </tbody>
          </table>
          <!--/////////////////// end pre-header///////////////////////////-->
          <!--/////////////////// hero image ///////////////////////////-->
          <table class="collapse" id="header" align="center" width="680" style="width: 680px; background-color: #1DA1F2;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" bgcolor="#1DA1F2" cellpadding="0" cellspacing="0"
            border="0">
            <tbody>
              <tr>
                <td style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                  <a href="https://twitter.com/i/redirect?url=https%3A%2F%2Fdashboard.twitter.com%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=abf9be283de2631912a7b4aa3ad0675489c665cb&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1554"
                    style="text-decoration: none;border-style: none;border: 0;padding: 0;margin: 0;text-decoration:none;border-style:none;border:0;padding:0;margin:0;">
                    <img src="https://ea.twimg.com/email/self_serve/media/smbss_dashboard_1-1471022201098.jpg" width="680" class="media" alt="Twitter for Business" style="font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;color: #ffffff;font-size: 50px;font-weight: 300;text-align: center;background-color: #1DA1F2;margin: 0px;padding: 0px;display: block;-ms-interpolation-mode: bicubic;border: none;outline: none;margin:0;padding:0;display:block;-ms-interpolation-mode:bicubic;border:none;outline:none;"
                    />
                  </a>
                </td>
              </tr>
            </tbody>
          </table>
          <!--/////////////////// end hero image ///////////////////////////-->
          <!--//////////////////// header copy //////////////////////////-->
          <table class="collapse" align="center" width="680" style="width: 680px;background-color: #ffffff;border-bottom: 2px solid #f5f8fa;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" cellpadding="0" cellspacing="0"
            border="0">
            <tbody>
              <tr>
                <td width="90" style="width: 90px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="margins"></td>
                <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                  <table width="100%" align="left" cellpadding="0" cellspacing="0" border="0" class="collapse" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                    <tbody>
                      <tr>
                        <td height="40" style="height: 40px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="main-unit-height"></td>
                      </tr>
                      <tr>
                        <td class="h2" style="padding: 0;margin: 0;line-height: 35px;font-size: 32px;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: bold;color: #657786;text-align: left;text-decoration: none;-webkit-font-smoothing: antialiased;padding:0;margin:0;line-height:1px;font-size:1px;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:35px;font-weight:bold;color:#657786;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">People are talking&nbsp;about you&nbsp;on&nbsp;Twitter</td>
                      </tr>
                      <tr>
                        <td height="26" style="height: 26px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
                      </tr>
                      <!--*********** button ************-->
                      <tr>
                        <td align="left" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                          <table style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                            <tbody>
                              <tr>
                                <td style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                  <!-- Tap, click, press, push the button -->
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                    <tbody>
                                      <tr>
                                        <td style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                          <table border="0" cellspacing="0" cellpadding="0" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                            <tbody>
                                              <tr>
                                                <td align="center" class="bulletproof-btn-1" bgcolor="#17BF63" style="padding: 0;margin: 0;line-height: 12px;font-size: 1px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;padding:0;margin:0;line-height:1px;font-size:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;line-height:12px;">
                                                  <a href="https://twitter.com/i/redirect?url=https%3A%2F%2Fdashboard.twitter.com%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=128d9c9030253ba69a135a562ed2f331f5fa6d25&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1555"
                                                    target="_blank" class="bulletproof-btn-3" style="color: #ffffff;text-decoration: none;border-style: none;border: 1px solid #17BF63;padding: 11px 25px;margin: 0;font-size: 14px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;display: inline-block;font-weight: bold;-webkit-font-smoothing: antialiased;text-decoration:none;border-style:none;border:0;padding:0;margin:0;font-size:12px;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:8px 17px;border:1px solid #17BF63;display:inline-block;font-weight:bold;-webkit-font-smoothing:antialiased;">
                                                    <!--[if gte mso 11]>&nbsp; &nbsp; &nbsp;<![endif]--><strong>See the conversation</strong>

                                                    <!--[if gte
                                                      mso 11]>&nbsp; &nbsp; &nbsp;<![endif]-->
                                                  </a>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <!--*********** end button ************-->
                    </tbody>
                  </table>
                </td>
                <td width="90" style="width: 90px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="margins"></td>
              </tr>
              <tr>
                <td colspan="3" height="70" style="height: 70px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="btm-unit-height2"></td>
              </tr>
            </tbody>
          </table>
          <!--//////////////////// end header copy //////////////////////////-->
          <!--//////////////////// body text //////////////////////////-->
          <table class="collapse" align="center" width="680" style="width: 680px;background-color: #ffffff;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" cellpadding="0" cellspacing="0" border="0">
            <tbody>
              <tr>
                <td width="90" style="width: 90px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="margins"></td>
                <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                  <table width="100%" align="left" cellpadding="0" cellspacing="0" border="0" class="collapse" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                    <tbody>
                      <tr>
                        <td height="40" style="height: 40px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="main-unit-height"></td>
                      </tr>
                      <tr>
                        <td class="h3" style="font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; font-weight: bold; color:#657786; text-align: left; text-decoration: none; -webkit-font-smoothing: antialiased;padding:0;margin:0;line-height:1px;font-size:1px;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:24px;font-weight:bold;color:#657786;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">Hi @reallygoodemail</td>
                      </tr>
                      <tr>
                        <td height="25" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
                      </tr>
                      <!-- ***** recap ***** -->
                      <tr align="center">
                        <td align="center" class="body-copy" style="padding: 0;margin: 0;line-height: 20px;font-size: 16px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;color: #657786;text-align: left;text-decoration: none;-webkit-font-smoothing: antialiased;padding:0;margin:0;line-height:1px;font-size:1px;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:20px;font-weight:400;color:#657786;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">Dashboard is a desktop and mobile app that will help you manage your Twitter account. So you can get back to business.
                          <br />
                          <br /> <strong>Social listening</strong>
                          <br />Set up a custom feed to see what’s already being said about your business. Engage with the Tweets that matter to you and your community.
                          <br />
                          <br /> <strong>Tweet scheduling</strong>
                          <br />Schedule Tweets in advance. Access or edit your Tweet queue on the go.
                          <br />
                          <br /> <strong>Tips &amp; analytics</strong>
                          <br />Kickstart your creative process with Tweet-inspiring ideas. Real-time analytics will show you what’s working.
                          <br />
                          <br />
                        </td>
                      </tr>
                      <tr align="left">
                        <td align="center" class="body-copy" style="padding: 0;margin: 0;line-height: 20px;font-size: 16px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight: 400;color: #657786;text-align: left;text-decoration: none;-webkit-font-smoothing: antialiased;padding:0;margin:0;line-height:1px;font-size:1px;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:20px;font-weight:400;color:#657786;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;"></td>
                      </tr>
                      <!-- ***** end recap ***** -->
                      <tr>
                        <td height="26" style="height: 26px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
                      </tr>
                      <!--*********** button ************-->
                      <tr>
                        <td align="left" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                          <table style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                            <tbody>
                              <tr>
                                <td style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                  <!-- Tap, click, press, push the button -->
                                  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                    <tbody>
                                      <tr>
                                        <td style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                          <table border="0" cellspacing="0" cellpadding="0" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;">
                                            <tbody>
                                              <tr>
                                                <td align="center" class="bulletproof-btn-1" bgcolor="#17BF63" style="padding: 0;margin: 0;line-height: 12px;font-size: 1px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;padding:0;margin:0;line-height:1px;font-size:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;line-height:12px;">
                                                  <a href="https://twitter.com/i/redirect?url=https%3A%2F%2Fdashboard.twitter.com%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=9176c98eac1f126ff31fad1dac436217a24c285d&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1556"
                                                    target="_blank" class="bulletproof-btn-3" style="color: #ffffff;text-decoration: none;border-style: none;border: 1px solid #17BF63;padding: 11px 25px;margin: 0;font-size: 14px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;display: inline-block;font-weight: bold;-webkit-font-smoothing: antialiased;text-decoration:none;border-style:none;border:0;padding:0;margin:0;font-size:12px;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:#ffffff;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:8px 17px;border:1px solid #17BF63;display:inline-block;font-weight:bold;-webkit-font-smoothing:antialiased;">
                                                    <!--[if gte mso 11]>&nbsp; &nbsp; &nbsp;<![endif]--><strong>Try Twitter Dashboard</strong>

                                                    <!--[if
                                                      gte mso 11]>&nbsp; &nbsp; &nbsp;<![endif]-->
                                                  </a>
                                                </td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                      <!--*********** end button ************-->
                    </tbody>
                  </table>
                </td>
                <td width="90" style="width: 90px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="margins"></td>
              </tr>
              <tr>
                <td colspan="3" height="70" style="height: 70px;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" class="btm-unit-height2"></td>
              </tr>
            </tbody>
          </table>
          <!--//////////////////// end text //////////////////////////-->
          <!--///////////////////// footer /////////////////////-->
          <table class="collapse" id="footer" align="center" width="680" style="width: 680px;background-color: #ffffff;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;" cellpadding="0" cellspacing="0" border="0">
            <tbody>
              <tr>
                <td height="1" style="line-height: 1px;display: block;height: 1px;background-color: #e1e8ed;padding: 0;margin: 0;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
              <tr>
                <td height="30" style="height: 30;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
              <tr>
                <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"> <span class="small-copy" style="font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;line-height: 16px;font-weight: 400;color: #8899a6;text-align: left;text-decoration: none;-webkit-font-smoothing: antialiased;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:400;color:#8899a6;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;"> <a href="https://twitter.com/i/redirect?url=https%3A%2F%2Fbusiness.twitter.com%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard%26lang%3Den%26ref%3Dus-em-tw-smbss_dashboard_3-20160927-a&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=c4f583b8bf136c69b05b93bdb5ffc9bfe75c1616&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1557" class="small-copy" style="text-decoration: none;border-style: none;border: 0;padding: 0;margin: 0;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;line-height: 16px;font-weight: 600;color: #17BF63;text-align: left;-webkit-font-smoothing: antialiased;text-decoration:none;border-style:none;border:0;padding:0;margin:0;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:400;color:#8899a6;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:600;color:#17BF63;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">business.twitter.com</a>&nbsp;|&nbsp; <a href="https://twitter.com/i/redirect?url=http%3A%2F%2Fwww.twitter.com%2FTwitterBusiness%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=c23d1bbd04aa4305df6db98a850e710e22a5c41f&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1558" class="small-copy" style="text-decoration: none;border-style: none;border: 0;padding: 0;margin: 0;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;line-height: 16px;font-weight: 600;color: #17BF63;text-align: left;-webkit-font-smoothing: antialiased;text-decoration:none;border-style:none;border:0;padding:0;margin:0;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:400;color:#8899a6;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:600;color:#17BF63;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">@TwitterBusiness</a>&nbsp;|&nbsp; <a href="https://twitter.com/i/redirect?url=http%3A%2F%2Fbusiness.twitter.com%2Fhelp%3Futm_source%3Dlead_factory%26utm_medium%3Demail%26utm_content%3D1%26utm_campaign%3Ddashboard&amp;t=1&amp;cn=c21ic3NfZGFzaGJvYXJkXzM%3D&amp;sig=62d632504e63659d66c170af000d97f6c017dcc0&amp;iid=cf2934c7eddd482e83dffd539cf9a2a7&amp;uid=14601788&amp;nid=244+1559" class="small-copy" style="text-decoration: none;border-style: none;border: 0;padding: 0;margin: 0;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;line-height: 16px;font-weight: 600;color: #17BF63;text-align: left;-webkit-font-smoothing: antialiased;text-decoration:none;border-style:none;border:0;padding:0;margin:0;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:400;color:#8899a6;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:600;color:#17BF63;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">Help</a>&nbsp;|&nbsp; <a href="#" class="small-copy" style="text-decoration: none;border-style: none;border: 0;padding: 0;margin: 0;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;line-height: 16px;font-weight: 600;color: #17BF63;text-align: left;-webkit-font-smoothing: antialiased;text-decoration:none;border-style:none;border:0;padding:0;margin:0;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:400;color:#8899a6;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:600;color:#17BF63;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;">Unsubscribe</a> </span>
                </td>
              </tr>
              <tr>
                <td height="10" style="height: 10px;line-height: 1px;font-size: 1px;padding: 0;margin: 0;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
              <tr>
                <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"> <span class="small-copy" style="font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size: 12px;line-height: 16px;font-weight: 400;color: #8899a6;text-align: left;text-decoration: none;-webkit-font-smoothing: antialiased;font-family:'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:400;color:#8899a6;text-align:left;text-decoration:none;-webkit-font-smoothing:antialiased;"> The email was meant for @reallygoodemail </span>
                </td>
              </tr>
              <tr>
                <td height="6" style="height: 6px;line-height: 1px;font-size: 1px;padding: 0;margin: 0;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
              <tr>
                <td align="center" style="padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"> <span class="address"> <p style="text-decoration: none;border-style: none;border: 0;padding: 0px;margin: 0px;font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;color: #8899a6;font-size: 12px;font-weight: normal;line-height: 12px;cursor: default;">Twitter, Inc. 1355 Market Street, Suite 900 San Francisco, CA 94103</p> </span>
                </td>
              </tr>
              <tr>
                <td height="40" style="height: 40;padding: 0;margin: 0;line-height: 1px;font-size: 1px;padding:0;margin:0;line-height:1px;font-size:1px;"></td>
              </tr>
            </tbody>
          </table>
          <!--///////////////////// end footer /////////////////////-->
        </td>
      </tr>
    </tbody>
  </table>
  <div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -</div>

</body>

</html>
            
          
!

CSS

            
              
            
          
!

JS

            
              
            
          
!
999px

Console