monkeytype/backend/email-templates/verification.html

<mjml>
  <mj-head>
    <mj-style>
      @import
      "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
      .btn table{ width: 100%; } .btn a{ width: 100%; padding: 10px 0
      !important;}
    </mj-style>
  </mj-head>
  <mj-body background-color="#323437">
    <mj-wrapper padding="20px 20px 200px 20px">
      <mj-section padding="0px" padding-bottom="20px">
        <mj-column width="600px">
          <mj-image
            width="200px"
            src="https://github.com/monkeytypegame/monkeytype/blob/master/frontend/static/images/mtfulllogo.png?raw=true"
            href="monkeytype.com"
            align="left"
          ></mj-image>
        </mj-column>
      </mj-section>
      <mj-section padding="0px">
        <mj-column background-color="#2c2e31" border-radius="8px">
          <mj-spacer></mj-spacer>

          <mj-text color="#d1d0c5" font-size="20px" font-family="sans-serif">
            Hey, {{name}}
          </mj-text>
          <mj-text
            color="#d1d0c5"
            font-size="16px"
            line-height="24px"
            font-family="sans-serif"
          >
            Thanks for joining Monkeytype! We just need one more thing from you
            - a quick confirmation of your email address and you'll be all set.
            Click the button below to get started:
          </mj-text>

          <mj-button
            align="left"
            background-color="#e2b714"
            color="#323437"
            font-size="16px"
            line-height="32px"
            css-class="btn"
            href="{{verificationLink}}"
            font-family="sans-serif"
          >
            Verify
          </mj-button>

          <mj-text
            color="#d1d0c5"
            font-size="16px"
            line-height="24px"
            padding-bottom="0px"
            font-family="sans-serif"
          >
            Cheers,
          </mj-text>
          <mj-text
            color="#d1d0c5"
            font-size="16px"
            line-height="24px"
            padding-top="0px"
            font-family="sans-serif"
          >
            Monkeytype Team
          </mj-text>

          <mj-divider border-color="#323437"></mj-divider>

          <mj-text
            color="#646669"
            font-size="12px"
            padding-bottom="0px"
            font-family="sans-serif"
          >
            Alternatively, you can copy and paste the link below into your
            browser:
          </mj-text>
          <mj-text color="#646669" font-size="12px" font-family="sans-serif">
            {{verificationLink}}
          </mj-text>

          <mj-spacer></mj-spacer>
        </mj-column>
      </mj-section>
      <mj-section padding-bottom="6px" padding-top="20px">
        <mj-column width="50px">
          <mj-button
            font-size="20px"
            padding="10px"
            inner-padding="0"
            color="#d1d0c5"
            background-color="#323437"
            href="https://github.com/monkeytypegame/monkeytype"
          >
            <i class="fab fa-fw fa-github"></i>
          </mj-button>
        </mj-column>
        <mj-column width="50px">
          <mj-button
            font-size="20px"
            padding="10px"
            inner-padding="0"
            color="#d1d0c5"
            background-color="#323437"
            href="https://x.com/monkeytype"
          >
            <i class="fab fa-fw fa-twitter"></i>
          </mj-button>
        </mj-column>
        <mj-column width="50px">
          <mj-button
            font-size="20px"
            padding="10px"
            inner-padding="0"
            color="#d1d0c5"
            background-color="#323437"
            href="https://discord.com/invite/monkeytype"
          >
            <i class="fab fa-fw fa-discord"></i>
          </mj-button>
        </mj-column>
      </mj-section>
      <mj-section padding-top="0">
        <mj-column>
          <mj-text align="center" color="#646669" background-color="#323437">
            monkeytype.com
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-wrapper>
  </mj-body>
</mjml>