JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ad draggable">
      <span class="header">Brandname</span><span class="handle">Drag Up to dismiss</span>
      <div class="content"><p>Some special deal, and picture of happy pretty people</p><p class="interactionPoint">Tap here for 50% off that thing you love, and other great deals!</p></div>
    </div>


  <script data-require="jquery@*" data-semver="2.1.1" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
  <script data-require="[email protected]" data-semver="1.10.0" src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
  <script data-require="[email protected]" data-semver="1.10.0" src="http://rawgithub.com/briangonzalez/jquery.pep.js/master/src/jquery.pep.js"></script>
  <script>
      $(document).on('click', '.interactionPoint', function (){
  $("body").css({backgroundColor: '#199CFB'});
  $(".ad").remove();
})

$('.draggable').pep({
  axis: 'y',
  drag: dragging,
  stop: belowFrame,
  useCSSTranslation: false
});

function dragging(e, obj) {
  var drag = $(obj.el);
  var top = drag.position().top;
  if (top < -80) {
    drag.remove();
  } 
  else if (top < 700) {
    $('.header').text("Tap for more info.");
    $('.header').css({color: '#ddd', backgroundColor: '#444'});
  } else if (top > 100) {
    drag.data('plugin_pep').setMultiplier(Math.pow((850/top),3));
  }
}
function belowFrame(e, obj){
  var drag = $(obj.el);
  var top = drag.position().top;
  if(top > 420){
    drag.css({top: 470});
  }
}

  </script>

CSS

body{
    background-color: red;
}

.ad {
  display: inline-block;
  width: 100%;
  height: 200px;
  border-radius: 5px;
  position: absolute;
  bottom: -65px;
  left: 0;
  background-color: lightgrey;
}

.header {
  width: 73%;
  height: 72%;
  background-color: lightgrey;
  display: inline-block;
  vertical-align:top;
  font-size: 120px;
  box-sizing: border-box;
  padding-left: 10px;
  color: #444;
}
.handle {
  display: inline-block;
  width: 25%;
  height: 62%;
  background-color: blue;
  cursor: move;
  text-align: center;
  color: #ddd;
  border-radius: 5px;
border-bottom-right-radius: 0;
    font-size: 60px;
    padding: 1%;
}
.content{
  display: inline-block;
  width: 100%;
  height: 500px;
  background-color: #199CFB;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: 60px;
  color: yellow;
  text-align: center;
  padding-top: 15px;
}

.interactionPoint{
  color: white;
  width: 70%;
  margin: auto;
}