JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<span class="preheader">
    Email with instructions to reset your password.
    </span>
    <table role="presentation" border="0" align="center" cellpadding="0" cellspacing="0" class="body">
      <tr>
        <td>&nbsp;</td>
        <td class="container">
          <header>
            <div class="logo">
              <h1><img src="/images/logo.png" alt="logo">StackOverflow</h1>
            </div>
          </header>
          <div id="content">
            <br>
            <p>
              Hello,
              <br><br>
              A request has been received to change the password for your StackOverlfow account.
              <br><br><br>
            <p>
            <center>
              <p>
                Click the link below to reset your password.
              <p>
              </p>
            </center>
            </p>
            </p>
            <br>
            <div class="buttonPassword">
              <center>
                <a class="button" href="#(link)">
                <strong>Reset password</strong>
                </a>
              </center>
            </div>
            <br>
            <br>
            <p>
              The link has a validity of one hour. Ask for a new one after this delay.
              <br>
              If you did not initiate this request, please contact us immediately at <a href="mailto:[email protected]">[email protected]</a> and ignore this
              email.
            </p>
            <br>
            <p>
              Thank you,
              <br>
              The StackOverlfow Team
            </p>
            <br>
          </div>
          <footer>
            <div class="right">
              <center>
                <p>© 2021 StackOverlfow. All right reserved.</p>
              </center>
            </div>
          </footer>
        </td>
        <td>&nbsp;</td>
      </tr>
    </table>

CSS

/*
      //  MARK: Styling
      */
      .button {
        border-radius: 4px;
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
        color: white;
        padding: 12px 12px;
        text-decoration: none;
        display: inline-block;
      }
      .buttonPassword {
        margin: auto;
      }
      #buttonReset {
        width: 150px;
        margin: auto;
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
        text-align: center;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
      }
      body {
        position: relative;
        margin: 16px;
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
      }
      .container {
        display: block;
        margin: 16px auto !important;
        max-width: 580px;
        padding: 10px;
        width: 580px;
      }
      .content {
        box-sizing: border-box;
        display: block;
        margin: 16px auto;
        max-width: 580px;
        padding: 10px;
      }
      footer {
        width: 100%;
        font-family: -apple-system-caption2, BlinkMacSystemFont, sans-serif;
      }
      header {
        margin: auto;
        width: 100%;
        position: relative;
        z-index: 100;
        top: 0;
      }
      html, body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 16px;
        padding: 16px;
      }
      .logo h1 {
        font-family: -apple-system-large-title, BlinkMacSystemFont, sans-serif;
        display: inline;
      }
      .logo img {
        padding: 16px;
        width: 64px;
        height: 64px;
        vertical-align: middle;
      }
      p {
        font-family: -apple-system-body, BlinkMacSystemFont, sans-serif;
      }
      .preheader {
        color: transparent;
        display: none;
        height: 0;
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
 ...