JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="overlay">
            <a href="#">Continue</a>
        </div>
        <!-- hide side bar on mobile -->
        <main class="main">
            <img class="dummy-bg" src="https://i.imgur.com/AsapsWY.png" alt="">
            <div class="main--flower"><img src="https://i.imgur.com/LcojM6B.png" alt=""></div>
            <div class="main--bin"><img src="https://i.imgur.com/l6A717T.png" alt=""></div>
            <!-- <a href="#" class="main--button">ACCESS KEYWORDS</a> -->
        </main>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  height: 100vh;
}
body .overlay {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
body .overlay a {
  padding: 10px 20px;
  background-color: red;
  color: white;
}
body a {
  transition-duration: 0.4s;
  transition-timing-function: linear;
  text-decoration: none;
}
body a:hover {
  text-decoration: none;
  cursor: pointer;
}
body .main {
  flex: 1;
  background: url("https://i.imgur.com/AsapsWY.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  min-width: 600px;
  height: 100%;
}
body .dummy-bg {
  width:100%;
  visibility:hidden;
}
body .main--flower {
  position: fixed;
  bottom: 200px;
  right: 200px;
  max-width: 100px;
}
body .main--bin {
  position: fixed;
  top: 400px;
  left: 200px;
  max-width: 100px;
}

/*# sourceMappingURL=styles.css.map */

JavaScript

$(document).ready(function(){

    

    // var mainAudio = new Audio('assets/audio.mp3');
    $('.overlay').on('click', handleContinueClick);

    function handleContinueClick(e){
        TweenLite.to($(this), 1, {opacity: 0,onComplete:function(){$('.overlay').hide()}});
        e.preventDefault;
        var startTl = new TimelineLite();
        startTl.staggerTo('.aside .animation', 0.4, {opacity: 1,ease: Power2.easeOut}, 1);
    }

      
});