JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<header>

    <div class="logo">
        <img class="logoimg" src="Logo24.png">
    </div>
        <!--Menu for mobile-->
        <div class="hamburger-menu">
            <div class="bar"></div>
        </div>
        <!--/Mobile menu-->
</header>


        <div id="loading">
            <h1>Creative. Simple.</h1>
        </div>


<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!--Javascript-->
<script src="js/main.js"></script>
</body>

CSS

/*
Color Palette
#c9c9c9 - Light smoke
#e3e3e3 - Gray tan
#9ad3de - Baby blue
#89bdd3 - Light blue
*/

/*Universal selectors*/
#loading > h1 {
  text-align: center;
  font-size: 21px;
  animation: fadeUpIn 3s;
  -webkit-animation: fadeUpIn 3s; /* Safari and Chrome */
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    margin: 0;
}

@-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
  from { opacity:0; top:58%; }
  to { opacity:1; top: 48%; }
}
#loading{
  position: absolute; top: 0; left: 0;
  width:100%;
  height: 100%;
  background-color: gray;
  color: white;
  opacity: 1;
  transition: 1s;
  visibility: visible;
}
#loading.hidden{
  opacity: 0;
  visibility: hidden;
}
body {
  background: #e3e3e3;
}


/*Header*/
header{
  background:#c9c9c9;
  width: 100%;
  height: 50px;
  padding: 0px 0 0 0;
  margin:0px 0 0 0;
}

/*--Logo--*/
.logo{
  padding:5px 5px 5px 5px;
}
.logoimg{
  width:50px;
  cursor: pointer;
}
/*--Mobile menu--*/
.hamburger-menu {
  width: 100px;
  height: 60px;
  cursor: pointer;
}
.bar, .bar:after, .bar:before {
  width: 20px;
  height: 2px;
}
.bar {
  position: absolute;
  right:25px;
  top:0px;
  margin-top: 0px;
  transform: translateY(25px);
  background: rgba(255, 255, 255, 1);
  transition: all 0ms 300ms;
}
.bar.animate {
  background: rgba(255, 255, 255, 0);
}
.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  background: rgba(255, 255, 255, 1);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  background: rgba(255, 255, 255, 1);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:before {
  bottom: 0;
 ...

JavaScript

setTimeout(function() {
    var element = document.getElementById('loading');
    element.classList += " hidden";
}, 3000);


(function () {
    $('.hamburger-menu').on('click', function() {
        $('.bar').toggleClass('animate');
    })
})();