JSFiddle - React, Tailwind, and code Playground

by Alex Cowan

HTML

<div id="login-content">
  <!-- On Forms: -->
  <!-- onsubmit="return false" will stop the form submission but allow us to pick up the submission in JQuery with $('#login-form').submit(), 		otherwise JSFiddle can break. -->

  <!-- allows us to easily switch between login and registration //removed for new approach -->
  <!--	<input type='checkbox' id='form-switch'>  -->

  <!-- Login -->
  <form id='login-form' method='post' onsubmit="return false">
    <input type="text" placeholder="Email" id="login_email" required>
    <input type="password" placeholder="Password" id="login_pwd" required>
    <button type='submit'>Log In</button>
    <a id='forgotten-link'>Forgot Password?</a>
    <h3><a class='auth-link' id='register-link'>Register</a></h3>
  </form>

  <!-- Registration -->
  <form id='register-form' method='post' onsubmit="return false">
    <input type="text" placeholder="Email" id="register_email" required>
    <input type="password" placeholder="Password" id="register_pwd" required>
    <input type="password" placeholder="Confirm Password" id="register_re_pwd" required>
    <button type='submit' style="text-align: right;">Register</button>
    <div id='if-reg-error'>
      <div id='reg-error-response' style="margin-top: 5px;"></div>
    </div>
  </form>

</div>