JSFiddle - React, Tailwind, and code Playground

Fliplet - Forced Update

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- SCREEN MOCKUP -->
<!-- DO NOT USE ----->
<div class="fl-viewport-header">
  <span class="nav-title">
    <span>Screen title</span>
  </span>
  <span class="nav-right" data-fl-toggle-menu=".fl-menu">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </span>
</div>
<div>
  <img src="https://drivenlocal.com/wp-content/uploads/2015/10/Material-design.jpg" />
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <h2>Aenean lacinia bibendum nulla sed consectetur.</h2>
      <p>Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non
        magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
      <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
        commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat
        porttitor ligula, eget lacinia odio sem nec elit.</p>
      <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum...

CSS

/***********************************
** DO NOT USE **********************
** JUST TO SET THE LOOK OF AN APP **
***********************************/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
html,
body {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

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

.fl-viewport-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  margin: 0 auto;
  line-height: 43px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 0 #fff;
  border-bottom: 1px solid rgba(127, 127, 127, 0.1);
  font-weight: 300;
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #333;
  font-size: 1em;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.fl-viewport-header .nav-title {
  display: block;
  margin: 0 18.5%;
  text-align: center;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fl-viewport-header .nav-left,
.fl-viewport-header .nav-right {
  position: absolute;
  top: 0;
  height: 43px;
  cursor: pointer;
  right: 0;
  width: 44px;
  font-size: 1.5em;
}

/***********************************
** END OF APP LOOK *****************
***********************************/

/***********************************
** BOTTOM BAR STYLES ***************
***********************************/

.update-overlay {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  display: none;
}

.update-overlay.forced {
  top: 0;
  z-index: 15;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255,...

JavaScript

var uploadFailed = true; // To trigger the success or fail scenario

// Changes bottom bar to contain the success template
function updateSuccess() {
  var updateSuccess = $('#update-success').html();
  $('.update-overlay-header').html(updateSuccess);
  $('.update-overlay.forced').addClass('success');
  
  calculateBodyHeight();
}

// Changes bottom bar to contain the fail template
function updateFail() {
  var updateFail = $('#update-fail').html();
  $('.update-overlay-header').html(updateFail);
  $('.update-overlay.forced').addClass('failed');
  $('.update-overlay-body').removeClass('expanded');
  
  calculateBodyHeight();
}

// Changes bottom bar to contain the downloading template
function updateDefault() {
  var updateDefault = $('#update-default').html();
  $('.update-overlay.forced').removeClass('failed');
  $('.update-overlay.forced').removeClass('success');
  $('.update-overlay.forced').addClass('updating');
  $('.update-overlay-header').html(updateDefault);
  updateProcess();
}

// INIT
function showOverlay() {
	updateDefault();
	$('.update-overlay.forced').fadeIn(250);
  $('.update-overlay.forced').css('display', 'flex');
  updateProcess();
}

// Fake the download progress and bottom bar animation
function updateProcess() {
  $('.progress .progress-bar').animate({
    width: "100%"
  }, {
    duration: 3000,
    easing: "linear",
    step: function(now, fx) {
      if ((now > 50 && now < 60) && uploadFailed) {
        fx.end = now;
        $(this).finish();
      }
    },
    done: function() {
      setTimeout(function() {
        $('.update-overlay.forced').removeClass('updating');
        if (uploadFailed) {
          updateFail();
        } else {
          updateSuccess();
        }
      }, 500);
    }
  });
}

// Calculates the height to create the hide/show update notes animation
function calculateBodyHeight() {
  $('.update-notes').css({'height':'','max-height':''});

  var maxHeight = $('.update-overlay').height();
  var headerHeight =...