Made with MJML App

email.mjml

<mjml>
    <mj-body>
      <mj-container background-color="#d6dde5">
        <mj-section 
          locked="true" 
          padding-bottom="20" 
          padding-top="20">
          
          <mj-column 
            width="66.66666666666666%" 
            vertical-align="middle">
            <mj-text 
              align="left" 
              color="#000000" 
              font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" 
              font-size="11"
              locked="true" 
              editable="true" 
              padding-left="25" 
              padding-right="25" 
              padding-bottom="0" 
              padding-top="0">
              <span style="font-size: 11px">[[HEADLINE]]</span>
            </mj-text>
          </mj-column>
          
          <mj-column 
            width="33.33333333333333%" 
            vertical-align="middle">
            <mj-text 
              align="right" 
              color="#000000" 
              font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" 
              font-size="11" 
              locked="true" 
              editable="false" 
              padding-left="25" 
              padding-right="25" 
              padding-bottom="0" 
              padding-top="0">
              <span style="font-size: 11px"><a href="https://mjml.io" style="text-decoration: none; color: inherit;">[[PERMALINK_LABEL]]</a></span>
            </mj-text>
          </mj-column>
        </mj-section>

        <mj-section background-color="#ffffff" padding-bottom="20" padding-top="20">
          <mj-column width="100%" vertical-align="top">
            <mj-image href="https://mjml.io" src="http://i.imgur.com/lVLObw7.png" alt="Alakazam logo" align="center" border="none" width="300" padding-left="0" padding-right="0" padding-bottom="0" padding-top="0">

            </mj-image>
          </mj-column>
        </mj-section>

        <mj-section background-color="#ffffff" padding-bottom="40" padding-top="20">
          <mj-column width="25%" vertical-align="top">
          </mj-column>
          
          <mj-column width="80%" vertical-align="top">
            <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="13" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p><span style="color: #5e0ab1;"><span style="font-weight: bold;"><span style="font-size: 25px;">Thank you for signing up!</span></span></span></p>
            </mj-text>
            
            <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="16" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p>
                <span style="color: rgb(57, 63, 76);">You're one step away from completing your registration.</span>
                <span style="font-weight: bold;"><span style="color: rgb(57, 63, 76);"></span></span>
            </mj-text>
            
            <mj-text align="center" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="35" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p>
                <span style="color: rgb(57, 63, 76); background-color: #F1F1F1; padding: 8px; border-radius: 19px;">8123</span>
                <span style="font-weight: bold;"><span style="color: rgb(57, 63, 76);"></span></span>
            </mj-text>
            
            
            <mj-text align="left" color="#000000" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" font-size="16" padding-left="25" padding-right="25" padding-bottom="0" padding-top="0">
              <p>
                <span style="color: rgb(57, 63, 76);">Type this verification code into the box or click on the button below to gain access to your brand spanking new dashboard.</span>
                <span style="font-weight: bold;"><span style="color: rgb(57, 63, 76);"></span></span>
            </mj-text>
            
            <mj-button background-color="#5e0ab1" color="#FFFFFF" font-size="18" align="center" vertical-align="middle" border="none" padding="15px 30px" border-radius="19px" href="http://cabbageapps.com" font-family="Ubuntu, Helvetica, Arial, sans-serif, Helvetica, Arial, sans-serif" padding-left="25" padding-right="25" padding-bottom="10" padding-top="10">
              Verify Email
            </mj-button>
          </mj-column>
          <mj-column width="80%" vertical-align="top">
            <mj-divider border-color="F1F1F1"></mj-divider>
          </mj-column>
        </mj-section>
      </mj-container>
    </mj-body>
</mjml>