<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Login modal</title>
</head>
<body>
  
<div class="container">  
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary btn-lg btn-modal" data-toggle="modal" data-target="#myModal" data-tab="login">Log In</button>
  <span>or</span>
  <button type="button" class="btn btn-primary btn-lg btn-modal" data-toggle="modal" data-target="#myModal" data-tab="register">Register</button>
  
  
  <hr />
  
  <p>Each button opens its corresponding tab in the modal window.</p>
  <p>Click on "Forgot Password" to expand form</p>
  <p>Clicking on "Already a Customer?" will change form layout for the existing customers.</p>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#login" aria-controls="login" role="tab" data-toggle="tab">Account Login</a></li>
        <li role="presentation"><a href="#register" aria-controls="register" role="tab" data-toggle="tab">Create an Account</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="login">
          <div class="modal-header">
            <h5>If you already have an online account, please enter your email address and password below.</h5>
          </div>
          <div class="modal-body">
            <form data-parsley-validate>
              <div class="form-group">
                <label for="email">Email address</label>
                <input type="email" class="form-control" id="email" placeholder="Email" data-parsley-trigger="change" required>
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" placeholder="Password" data-parsley-trigger="change" required>
              </div>
              <button type="submit" class="btn btn-grey">Log in Now</button>
            </form>
          </div>
          <div class="modal-footer">
            <h5>Forgot your password?</h5>
            <p><a class="" role="button" data-toggle="collapse" href="#forgot-password-collapse" aria-expanded="false" aria-controls="forgot-password-collapse">Click here</a> to have a new one sent to you.</p>
            
            <div class="collapse" id="forgot-password-collapse">
              <h5>Password Assistance</h5>
              <p>Please enter the email address you used to create your WSJwine account, and we will send a new password.</p>
              <form>
                <div class="form-group">
                  <label for="forgot-password-email">Email address</label>
                  <input type="email" class="form-control" id="forgot-password-email" placeholder="Email">
                </div>
                <button type="submit" class="btn btn-grey">Send me my password</button>
              </form>
            </div>
          </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="register">
          <div class="modal-header">
            <h5>New Account Registration</h5>
          </div>
          <div class="modal-body">
            <form class="row">
              <div class="form-group col-sm-6">
                <label for="first-name">First Name</label>
                <input type="text" class="form-control" id="first-name" placeholder="First Name">
              </div>
              <div class="form-group col-sm-6">
                <label for="last-name">Last Name</label>
                <input type="text" class="form-control" id="last-name" placeholder="Last Name">
              </div>
              <div class="checkbox col-xs-12">
                <label>
                  <input type="checkbox" id="customer-type"> Already a Customer?
                </label>
              </div>
              <div class="new-customer clearfix">
                <div class="form-group col-sm-6">
                  <label for="email-address">Email Address</label>
                  <input type="email" class="form-control" id="email-address" placeholder="Email">
                </div>
                <div class="form-group col-sm-6">
                  <label for="confirm-first-name">Confirm Email Address</label>
                  <input type="email" class="form-control" id="confirm-first-name" placeholder="Email">
                </div>
                <div class="form-group col-sm-6">
                  <label for="password">Password</label>
                  <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
                <div class="form-group col-sm-6">
                  <label for="confirm-password">Confirm Password</label>
                  <input type="password" class="form-control" id="confirm-password" placeholder="Password">
                </div>
                <small class="col-xs-12">Password must be a minimum of 8 characters and contain at least 1 number and 1 letter.</small>
                <div class="checkbox col-xs-12">
                  <label>
                    <input type="checkbox"> I would like to receive special wine offers, shipment tracking info and order status updates
                  </label>
                </div>
                <div class="form-group col-sm-12">
                  <label for="company-name">Company Name</label>
                  <input type="text" class="form-control" id="company-name" placeholder="Company Name">
                </div>
                <div class="form-group col-sm-12">
                  <label for="address-one">Address 1</label>
                  <input type="text" class="form-control" id="address-one" placeholder="House #, Street">
                </div>
                <div class="form-group col-sm-12">
                  <label for="address-two">Address 2</label>
                  <input type="text" class="form-control" id="address-two" placeholder="Apt./Unit #">
                </div>
                <div class="form-group col-sm-3">
                  <label for="zip-code">Zip Code</label>
                  <input type="tel" class="form-control" id="zip-code" placeholder="5 digit zip">
                </div>
                <div class="form-group col-sm-6">
                  <label for="city">City</label>
                  <input type="text" class="form-control" id="city" placeholder="City, Town">
                </div>
                <div class="form-group col-sm-3">
                  <label for="state">State</label>
                  <input type="text" class="form-control" id="state" placeholder="State">
                </div>
                <div class="form-group col-sm-6">
                  <label for="phone">Phone</label>
                  <input type="tel" class="form-control" id="phone" placeholder="Phone number">
                </div>
              </div>
              <div class="existing-customer clearfix">
                <div class="form-group col-sm-6">
                  <label for="customer-number">Customer #:</label>
                  <input type="tel" class="form-control" id="customer-number" placeholder="Your Customer Number">
                </div>
                <div class="form-group col-sm-6">
                  <label for="zip-code">Zip Code</label>
                  <input type="tel" class="form-control" id="zip-code" placeholder="5 digit zip">
                </div>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-grey create-account">Create Account</button>
                <button type="submit" class="btn btn-grey verify-account hide">Verify Account</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>
body {
  height: 100%;
}

.btn-modal {
  margin: 2em;
}

.btn {
  border-radius: 0;
  border: none;
  -webkit-transition: background-color ease-out 0.5s;
  -moz-transition: background-color ease-out 0.5s;
  -o-transition: background-color ease-out 0.5s;
  transition: background-color ease-out 0.5s;
  &:hover {
    -webkit-transition: box-shadow ease-out 0.3s;
    -moz-transition: box-shadow ease-out 0.3s;
    -o-transition: box-shadow ease-out 0.3s;
    transition: box-shadow ease-out 0.3s;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  }
}

.btn-grey {
  background: #797979;
  color: #fff;
  &:hover {
    background: #575757;
    color: #fff;
  }
}

.close {
  opacity: 0.4;
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 1;
}

.form-control {
  border-radius: 0;
  box-shadow: none;
  &:focus {
    box-shadow: none;
    border-color: #999;
  }
}

#myModal {
  .modal-dialog {
    /* max-width: 580px; */
  }
  .modal-content {
    border-radius: 0;
    border: none;
    form {
      label {
        font-weight: normal;
        margin-bottom: 2px;
      }
    }
  }
  .modal-footer {
    text-align: left;
  }
}

.nav-tabs {
  &>li {
    width: 50%;
    a {
      margin: 0;
      border-radius: 0;
      text-align: center;
      font-weight: 600;
    }
  }
}



/* Optional Styling */
.nav-tabs>li>a {
  background-color: #ccc;
  color: #666;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus {
  background-color: #f7f7f7;
  color: #5a5a5a;
}
.modal-content {
  background-color: #f7f7f7;
}
/*.form-control {
  border: none;
}
*/

/* Form validation */
.parsley-error {
  border-color: #c00;
  color: #c00;
  background-color: #FFD9D9;
}

/* Forgot Password Section */
#forgot-password-collapse {
  border-top: 2px dashed #999;
  margin-top: 30px;
  h5 {
    margin-top: 15px;
  }
  form {
    margin-top: 20px;
  }
}

.existing-customer {
  display: none;
}
View Compiled
 $(document).ready(function() {
   // Open active tab based on button clicked
    $('.btn-modal').on('click', function() {
      var switchTab = $(this).data('tab');   
      activaTab(switchTab);
      function activaTab(switchTab) {
          $('.nav-tabs a[href="#' + switchTab + '"]').tab('show');
      };
    });
   
   // Toggle New/Existing Customer
    var custType = $('#customer-type'),
        newCust = $('.new-customer'),
        existCust = $('.existing-customer'),
        createAccBtn = $('.create-account'),
        verifyAccBtn = $('.verify-account');
   
    custType.val($(this).is(':checked'))
            .change(function() {
    if ($(this).is(':checked')) {
          newCust.fadeToggle(400, function() { // Hide Full form when checked
            existCust.fadeToggle(500); //Display Small form when checked
            createAccBtn.toggleClass('hide');
            verifyAccBtn.toggleClass('hide');
          });
          
        } else {
          existCust.fadeToggle(400, function() { //Hide Small form when unchecked
            newCust.fadeToggle(500); //Display Full form when unchecked
            createAccBtn.toggleClass('hide');
            verifyAccBtn.toggleClass('hide');
          });
          
        }
   });
  });



Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.js