JSFiddle - React, Tailwind, and code Playground

Registration Confirmation

by Dug Sohn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<br>
<br>
<div class="row">
  <div class="container">
    <div class="col-xs-8 col-sm-offset-2">
      <div>
        <div class="login-register-modal">
          <div aria-hidden="false" aria-labelledby="mySmallModalLabel" bsmodal="" class="modal fade in" role="dialog" tabindex="-1" style="display: block;">
            <div class="modal-dialog modal-md ">
              <div class="modal-content ">
                <div class="modal-header">
                  <div class="row">
                    <div class="col-xs-10 col-md-8 col-md-offset-2">
                      <h2 class="modal-title text-center"><b >Register <span  class="hidden-xs-inline-block">for MyGexa</span></b></h2>
                    </div>
                    <div class="col-xs-2 col-md-2">
                      <button aria-label="Close" class="close btn btn-block btn-link" type="button"> <span aria-hidden="true" class="close-btn"><i  class="fa fa-remove"></i></span></button>
                    </div>
                  </div>
                </div>
                <div class="modal-body container-fluid">
                  <div class="row">
                    <div class="col-xs-12 col-md-8 col-md-offset-2">
                      <form id="registration" novalidate="" class="ng-untouched ng-invalid ng-dirty">
                        <div class="form-group">
                          <label class="control-label">Service Number</label>
                          <input class="form-control "...

SCSS

$account-base:  rgba(6,81,128,1.0)       !default;
$plans-base:    rgba(254,162,32,1.0)     !default;
$payment-base:  rgba(46,177,52,1.0)      !default;
$control-base:  rgba(27,141,205,1.0)     !default;
$footer-base:   rgba(231,231,231,1.0)    !default;
$dark-base:     rgba(10,10,10,1.0)       !default;
$highlight-row:  rgba(241,240,207, 0.8) !default;

body {
  background-color:#444;
}

.login-register-modal{
  position: absolute;
  width:600px;
  
  .options-spacer {
    color: $payment-base;

  hr {
  margin-top: 12px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid $payment-base;
    }

}
.last-four-ssn {
  width:65px
}

  .modal-content{
    text-align: center;
    //width:550px; height: 850px;
    //overflow-y: scroll;
  }
  .modal-header {
    padding-top:10px;
    border-bottom: 0px white;
    .modal-title{
      padding:2px 0px 5px 75px ;
      font: bold;
      padding: 10px 0;
      }
    button.close {
      margin-top:20px;
      text-align: left;
    }
  }
  .control-label {
    text-align: left;
    display: block;
  }
  .help-block {
    // font-size:10px;
    text-align: left;
  }
}

.btn-block, .btn-block:hover {
  background-color: $payment-base;
  text-transform: uppercase;
}


@media screen and (min-width: 768px) {
.modal-dialog {
    right: auto;
    left: 0;
    }
 }


.checkbox label:after {
    content: '';
    display: table;
    clear: both;
  }

  .checkbox .cr {
    position: relative;
    display: inline-block;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.5em;
    height: 1.5em;
    margin-left: -2.8em;
    // background:#000;
  }
  .checkbox .cr .cr-icon {
    position: absolute;
    font-size: 1em;
    line-height: 0;
    top: 50%;
    left: 20%;
    //color:#fff;
  }
  .fa-check {
    color: $payment-base;

  }

  .checkbox label input[type="checkbox"] {
    display: none;
    padding-left:1.4em;
  }

  .checkbox label input[type="checkbox"] + .cr > .cr-icon {
    transform: scale(3)...

JavaScript

$('#register_btn').click(function() {
  $('#registration').hide();
  $("#overlay").show();

  var delay = 2000;
  setTimeout(function()

    {
      $("#overlay").hide();

      $('#registration_confirmation_form').show();

    },
    delay
  );

});