Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
  <title></title>
  <!--[if !mso]>
      <!-- -->
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <!--<![endif]-->
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    .ReadMsgBody {
      width: 100%;
    }

    .ExternalClass {
      width: 100%;
    }

    .ExternalClass * {
      line-height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if !mso]>
      <!-->
  <style type="text/css">
    @media only screen and (max-width:480px) {
      @-ms-viewport {
        width: 320px;
      }
      @viewport {
        width: 320px;
      }
    }
  </style>
  <!--<![endif]-->
  <!--[if mso]>
      <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    <![endif]-->
  <!--[if lte mso 11]>
      <style type="text/css">
        .outlook-group-fix {
          width:100% !important;
        }
      </style>
    <![endif]-->
  <!--[if !mso]>
      <!-->
  <link href="https://fonts.googleapis.com/css?family=Didact%20Gothic%3Aregular%2Citalic%2C700%2C700italic" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Manuale%3Aregular%2Citalic%2C700%2C700italic" rel="stylesheet" type="text/css">
  <style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Didact%20Gothic%3Aregular%2Citalic%2C700%2C700italic);
    @import url(https://fonts.googleapis.com/css?family=Manuale%3Aregular%2Citalic%2C700%2C700italic);
  </style>
  <!--<![endif]-->
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-100 {
        width: 100% !important;
      }
      .mj-column-per-10 {
        width: 10% !important;
      }
      .mj-column-per-90 {
        width: 90% !important;
      }
      .mj-column-per-25 {
        width: 25% !important;
      }
      .mj-column-per-25 {
        width: 25% !important;
      }
      .mj-column-per-26 {
        width: 26% !important;
      }
      .mj-column-per-24 {
        width: 24% !important;
      }
    }
  </style>
  <style>
    .preheader {
      display: none !important;
      visibility: hidden;
      opacity: 0;
      color: transparent;
      height: 0;
      width: 0;
    }
  </style>
</head>

<body style="background: #FAFAFA;"> <span class="preheader" style="display:none !important;visibility:hidden;opacity:0;color:transparent;height:0;width:0;">Meet all our non-dairy milks.</span>
  <div class="mj-container" style="background-color:#FAFAFA;">
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div data-class="" style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:600px;">
                            <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:20px 0px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:120px;">
                                <a href="https://www.goodeggs.com/sfbay/dairy?&disableAppPromo=true&utm_source=hello&utm_campaign=alternative_milks&utm_medium=email&utm_content=header#dairy-non-dairy-milk" style="color: #0080AE; text-decoration: underline;" target="_blank" universal="true">
                                                <img alt="Good Eggs" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/jMQlDQRBK88wyqryjLoUNFbfaZK28LYP7KMOi11aChE.png"
                                                style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                title="Good Eggs" width="120">
                                              </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:600px;">
                            <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:10px 50px;">
                        <div style="cursor:auto;color:#392F2C;font-family:'Didact Gothic',sans-serif;font-size:50px;font-weight:normal;line-height:55px;text-align:center;"><span><strong>Hello, non-dairy milks!</strong></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:10px 50px 20px 50px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:19px;font-weight:normal;line-height:28.5px;text-align:center;">
                          <p style="margin: 0;">Meet all the dairy-milk alternatives in our Marketplace and learn the best ways to use them.</p>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:0px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:600px;">
                                <a href="https://www.goodeggs.com/sfbay/dairy?&disableAppPromo=true&utm_source=hello&utm_campaign=alternative_milks&utm_medium=email&utm_content=image#dairy-non-dairy-milk" style="color: #0080AE; text-decoration: underline;" target="_blank" universal="true">
                                                <img alt="Alternative Milks" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/KzCU3vwjRQa0a7Dg8MiCEuHwG4uVTtZugFaDCv3mt6g.jpg"
                                                style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                title="Alternative Milks" width="600">
                                              </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:600px;">
                            <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td style="word-wrap:break-word;font-size:0px;">
                        <div style="font-size:1px;line-height:20px;white-space:nowrap;"> </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:10px 10px 30px 10px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#392F2C" style="border:0px;border-radius:100px;color:#FFFFFF;cursor:auto;padding:10px 50px;" valign="middle">
                                <a href="https://www.goodeggs.com/sfbay/dairy?&disableAppPromo=true&utm_source=hello&utm_campaign=alternative_milks&utm_medium=email&utm_content=button#dairy-non-dairy-milk" style="text-decoration: none; background: #392F2C; color: #FFFFFF; font-family: 'Didact Gothic',sans-serif; font-size: 19px; font-weight: normal; line-height: 120%; text-transform: none; margin: 0px;"
                                  target="_blank" universal="true"><span><strong>Shop Non-Dairy Milk</strong></span>
                                              </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 20px 0px 40px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:60px;">
                            <![endif]-->
              <div class="mj-column-per-10 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 0px 0px 10px;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:30px;">
                                <img alt="" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/Mw8nXn7Y10Ltu2aai6CutHb7go1bdpnVSavgSR7FLc7.png" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                  width="30">
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                            <td style="vertical-align:top;width:540px;">
                            <![endif]-->
              <div class="mj-column-per-90 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 10px 5px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:'Didact Gothic',sans-serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;"><span><span style="color: #392F2C;"><strong>Almond milk</strong></span></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:5px 10px 20px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:19px;font-weight:normal;line-height:28.5px;text-align:left;">
                          <p style="margin: 0;">Simple and balanced – great for soaking overnight oats.</p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 20px 0px 40px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:60px;">
                            <![endif]-->
              <div class="mj-column-per-10 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 0px 0px 10px;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:30px;">
                                <img alt="" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/60yu7Zn5jmzsHmC3Eo9Eqotv8udEd37b7B1dF99AIYZ.png" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                  width="30">
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                            <td style="vertical-align:top;width:540px;">
                            <![endif]-->
              <div class="mj-column-per-90 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 10px 5px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:'Didact Gothic',sans-serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;"><span><strong>Pea milk</strong></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:5px 10px 20px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:19px;font-weight:normal;line-height:28.5px;text-align:left;">
                          <p style="margin: 0;"><span style="color: #392F2C;">A high-protein base for smoothies and shakes.</span>
                          </p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 20px 0px 40px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:60px;">
                            <![endif]-->
              <div class="mj-column-per-10 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 0px 0px 10px;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:30px;">
                                <img alt="" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/DKGFQq9IA1MRPeSorEpvLTG3sa7Q7eCjMeJ2zLhSpDy.png" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                  width="30">
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                            <td style="vertical-align:top;width:540px;">
                            <![endif]-->
              <div class="mj-column-per-90 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 10px 5px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:'Didact Gothic',sans-serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;"><span><span style="color: #392F2C;"><strong>Oat milk</strong></span></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:5px 10px 20px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:19px;font-weight:normal;line-height:28.5px;text-align:left;">
                          <p style="margin: 0;"><span style="color: #392F2C;">Add creaminess to lattes, cappucinos, or pancake batter.</span>
                          </p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 20px 0px 40px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:60px;">
                            <![endif]-->
              <div class="mj-column-per-10 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 0px 0px 10px;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:30px;">
                                <img alt="" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/UBrY8PVzydrbKC7BONOUjwC0EftA9lcVuNOsHEB1WtU.png" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                  width="30">
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                            <td style="vertical-align:top;width:540px;">
                            <![endif]-->
              <div class="mj-column-per-90 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 10px 5px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:'Didact Gothic',sans-serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;"><span><span style="color: #392F2C;"><strong>Coconut milk</strong></span></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:5px 10px 30px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;">
                          <p style="margin: 0;"><span style="color: #392F2C;">Add to soups, stews, and curries – or make ice cream!</span>
                          </p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px 20px 0px 40px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:60px;">
                            <![endif]-->
              <div class="mj-column-per-10 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 0px 0px 10px;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:30px;">
                                <img alt="" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/EXvf5OpFwNaR8IBFUTV6rY6rUDZnIAPtVIymqcGmy4g.png" style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                  width="30">
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                            <td style="vertical-align:top;width:540px;">
                            <![endif]-->
              <div class="mj-column-per-90 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:20px 10px 5px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:'Didact Gothic',sans-serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;"><span><span style="color: #392F2C;"><strong>Macadamia nut milk</strong></span></span>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="left" style="word-wrap:break-word;font-size:0px;padding:5px 10px 30px 10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:20px;font-weight:normal;line-height:30px;text-align:left;">
                          <p style="margin: 0;"><span style="color: #392F2C;">Add nuttiness to lattes, hot cocoa, and dessert recipes.</span>
                          </p>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:600px;">
                            <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:10px 10px 30px 10px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;">
                          <tbody>
                            <tr>
                              <td align="center" bgcolor="#392F2C" style="border:0px;border-radius:100px;color:#FFFFFF;cursor:auto;padding:10px 50px;" valign="middle">
                                <a href="https://blog.goodeggs.com/blog/demystifying-non-dairy-milk?utm_source=hello&utm_campaign=alternative_milks&utm_medium=email&utm_content=button" style="text-decoration: none; background: #392F2C; color: #FFFFFF; font-family: 'Didact Gothic',sans-serif; font-size: 19px; font-weight: normal; line-height: 120%; text-transform: none; margin: 0px;"
                                  target="_blank"><span><strong>Learn More on the Blog</strong></span>
                                              </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:150px;">
                            <![endif]-->
              <div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;font-size:0px;line-height:0px;text-align:left;width:100%;">
                <!--[if mso | IE]>
                                <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                                  <tr>
                                    <td style="vertical-align:top;width:37px;">
                                    <![endif]-->
                <div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:25%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                    <tbody>
                      <tr>
                        <td align="center" style="word-wrap:break-word;font-size:0px;padding:0px;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                            <tbody>
                              <tr>
                                <td style="width:26px;">
                                  <a href="https://www.instagram.com/goodeggs/?utm_campaign=Hello_Alternative_Milks_Generic&utm_content=hello_alternative_milks_message_b&utm_medium=email&utm_source=zaius" style="color: #0080AE; text-decoration: underline;" target="_blank">
                                                        <img alt="Instagram @GoodEggs" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/bMZWWYjDlOhUzlakxvlSlDgYllhLvk1rm39N4PeO8rM.png"
                                                        style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                        width="26">
                                                      </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
                                    </td>
                                    <td style="vertical-align:top;width:37px;">
                                    <![endif]-->
                <div class="mj-column-per-25 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:25%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                    <tbody>
                      <tr>
                        <td align="center" style="word-wrap:break-word;font-size:0px;padding:0px;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                            <tbody>
                              <tr>
                                <td style="width:26px;">
                                  <a href="https://www.facebook.com/GoodEggs/?utm_campaign=Hello_Alternative_Milks_Generic&utm_content=hello_alternative_milks_message_b&utm_medium=email&utm_source=zaius" style="color: #0080AE; text-decoration: underline;" target="_blank">
                                                        <img alt="Facebook Good Eggs" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/inraitIYquR5jdNKuv6BGtl6YpKAu28NirpwKjrZwzZ.png"
                                                        style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                        width="26">
                                                      </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
                                    </td>
                                    <td style="vertical-align:top;width:39px;">
                                    <![endif]-->
                <div class="mj-column-per-26 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:26%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                    <tbody>
                      <tr>
                        <td align="center" style="word-wrap:break-word;font-size:0px;padding:0px;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                            <tbody>
                              <tr>
                                <td style="width:26px;">
                                  <a href="https://twitter.com/goodeggs?utm_campaign=Hello_Alternative_Milks_Generic&utm_content=hello_alternative_milks_message_b&utm_medium=email&utm_source=zaius" style="color: #0080AE; text-decoration: underline;" target="_blank">
                                                        <img alt="Twitter @GoodEggs" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/UmdgWgRfnGmUE4ME8qlaI75JDF0JeysQeawnBh6AKFk.png"
                                                        style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                        width="26">
                                                      </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
                                    </td>
                                    <td style="vertical-align:top;width:36px;">
                                    <![endif]-->
                <div class="mj-column-per-24 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:24%;">
                  <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                    <tbody>
                      <tr>
                        <td align="center" style="word-wrap:break-word;font-size:0px;padding:0px;">
                          <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                            <tbody>
                              <tr>
                                <td style="width:26px;">
                                  <a href="https://www.yelp.com/biz/good-eggs-san-francisco?utm_campaign=Hello_Alternative_Milks_Generic&utm_content=hello_alternative_milks_message_b&utm_medium=email&utm_source=zaius" style="color: #0080AE; text-decoration: underline;" target="_blank">
                                                        <img alt="Yelp Good Eggs" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/wz0GTsXaNGJo2jR0bdNMsQubD4cvybz8FLfsnwT748J.png"
                                                        style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                        width="26">
                                                      </a>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
                                    </td>
                                  </tr>
                                </table>
                              <![endif]-->
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
    <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600"
        align="center" style="width:600px;">
          <tr>
            <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
            <![endif]-->
    <div style="margin:0px auto;max-width:600px;background:#FFFFFF;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="font-size:0px;width:100%;background:#FFFFFF;">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;border:0px;direction:ltr;font-size:0px;padding:0px;">
              <!--[if mso | IE]>
                        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td style="vertical-align:top;width:600px;">
                            <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:0px;vertical-align:top;" width="100%">
                  <tbody>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:10px;">
                        <div style="cursor:auto;color:#392F2C;font-family:Manuale,serif;font-size:14px;font-weight:normal;line-height:21px;text-align:center;">
                          <p style="margin: 0;"><span style="color: #392F2C;">This email was sent to <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28a878e8e8da2b18f8b8e8791a683948b91cc9b87838a">[email&#160;protected]</a></span>
                          </p>
                          <p style="margin: 0;"><span style="color: #392F2C;">901 Rankin · San Francisco, CA 94124 · USA </span>
                          </p>
                          <p style="margin: 0;">
                            <br>
                            <a href="https://www.goodeggs.com/" style="color: #0080AE; text-decoration: underline;"
                              clicktracking="off"><span style="color: #392F2C;"><ins>Unsubscribe</ins></span>
                                          </a>
                          </p>
                          <p style="margin: 0;">
                            <a href="https://help.goodeggs.com/hc/en-us?utm_campaign=Hello_Alternative_Milks_Generic&utm_content=hello_alternative_milks_message_b&utm_medium=email&utm_source=zaius" style="color: #0080AE; text-decoration: underline;"><span style="color: #392F2C;"><ins>Good Eggs Help Center</ins></span>
                                          </a>
                          </p>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td align="center" style="word-wrap:break-word;font-size:0px;padding:6px 0px 15px 0px;">
                        <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                          <tbody>
                            <tr>
                              <td style="width:46px;">
                                <a href="https://www.goodeggs.com/sfbay/dairy?&disableAppPromo=true&utm_source=hello&utm_campaign=alternative_milks&utm_medium=email&utm_content=footer#dairy-non-dairy-milk" style="color: #0080AE; text-decoration: underline;" target="_blank" universal="true">
                                                <img alt="" height="auto" src="https://s3.amazonaws.com/zaius-images/k4ox3N42bb71eHUBBag49Q/_/WAMGAw9yd6ebX7s6zd8TLdks4Z9kJ66fepn86hWdgl6.png"
                                                style="border:0px;border-radius:0px;display:block;font-size:13px;outline:none;text-decoration:none;width:100%;height:auto;"
                                                width="46">
                                              </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
                            </td>
                          </tr>
                        </table>
                      <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
            </td>
          </tr>
        </table>
      <![endif]-->
  </div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console