JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <div class="check-in">

        <div class="check present" data-state="check-in">
          <h1 style="text-align: center;">Check in at DAN Live!</h1>
          <p style="text-align: center;">Use the Event App to see your <i><strong>Check in  code</strong></i> and enter it below.</p>
          <form class="form-horizontal">
            <div class="form-group">
              <label for="email" class="control-label">Please enter your check in code</label>
              <div class="input-holder">
                <input type="password" name="Check-in code" class="form-control checkin-code">
              </div>
              <div class="form-btns text-center">
                <div type="submit" class="btn btn-primary checkin-btn">
                  <span>Check in</span>
                  <div class="loader">Loading...</div>
                </div>
              </div>
              <div class="error-handler">
                <p class="text-danger text-center nocode">You need to enter a check in code. Please try again.</p>
                <p class="text-danger text-center badcode">Sorry! That was an invalid check-in code. Please try again.</p>
              </div>
            </div>
          </form>
        </div>

        <div class="check future" data-state="success">
          <h1 style="text-align: center;">Welcome to DAN Live, [user’s first name]</h1>
          <br/>
          <h4 style="text-align: center;">Group</h4>
          <p style="text-align: center;"><strong>[group]</strong></p>
          <br/>
          <h4 style="text-align: center;">First event</h4>
          <p style="text-align: center;"><strong>[event]</strong></p>
          <br/>
          <h4 style="text-align: center;">Location</h4>
          <p style="text-align: center;">Room <strong>[room]</strong> at...

CSS

html,
body,
.container-fluid,
.container-fluid > .row,
.container-fluid > .row > .col-sm-12 {
  height: 100%;
}

body.fl-with-top-menu {
  padding-top: 0;
}

.check-in {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

.form-horizontal .form-group {
  margin-left: 0px;
  margin-right: 0px;
}

.check-in {
  position: relative;
  overflow: hidden;
}

.check {
  position: absolute;
  width: 100%;
  pointer-events: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.check.present {
  pointer-events: all;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.check.future {
  -webkit-transform: translate3d(130%, 0, 0);
  transform: translate3d(130%, 0, 0);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.check.past {
  -webkit-transform: translate3d(-130%, 0, 0);
  transform: translate3d(-130%, 0, 0);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

@media screen and (min-width: 640px) {
  .container-fluid {
    padding: 0 12.5%;
  }
}

.checkin-btn.disabled {
  pointer-events: none;
}

.checkin-btn.loading span {
  display: none;
}

.checkin-btn.loading .loader {
  display: block;
}


/* LOADER ANIMATION */

.loader {
  display: none;
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 2px auto;
  font-size: 2px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #FFFFFF;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
 ...

JavaScript

var error = true;

$('.checkin-btn').on('click', function() {
  $('.checkin-btn').addClass('loading disabled');
  $('.error-handler').find('.nocode').removeClass('show');
  $('.error-handler').find('.badcode').removeClass('show');

  // Validation
  if ($('input.checkin-code').val().length) {
    // SIMULATE CHECK
    setTimeout(function() {
      // IF CHECK PASSES
      if (error) {
        $('.error-handler').find('.badcode').addClass('show');
        $('input.checkin-code').val('').trigger('focus');
      } else {
        $('.check[data-state="check-in"]').removeClass('present').addClass('past');
        $('.check[data-state="success"]').removeClass('future').addClass('present');
      }

      $('.checkin-btn').removeClass('loading disabled');
    }, 500);
  } else {
    $('.error-handler').find('.nocode').addClass('show');
    $('input.checkin-code').val('').trigger('focus');
    $('.checkin-btn').removeClass('loading disabled');
  }
});

$('.restart-btn').on('click', function() {
  Fliplet.Navigate.screen(home);
});