JSFiddle - React, Tailwind, and code Playground

by Edgar P

HTML

<a href="javascript:void(0);" id="switcher">Öffnen/Schließen</a>
<div class="smartphone-position close">
  <div class="smartphone">
    <div class="content">
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
      hi<br>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.smartphone-position {
  position: absolute;
  right: 0;
  bottom: 0;
  -webkit-transition: all 220ms ease-in-out;
  -moz-transition: all 220ms ease-in-out;
  -ms-transition: all 220ms ease-in-out;
  -o-transition: all 220ms ease-in-out;
  transition: all 220ms ease-in-out;
}

.smartphone-position.close {
  bottom: -500px;
}

.smartphone {
  background: url(http://www.stickpng.com/assets/images/580b57fbd9996e24bc43bf87.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 500px;
  width: 290px;
  position: relative;
}

.smartphone .content {
  position: absolute;
  left: 43px;
  top: 77px;
  right: 43px;
  bottom: 62px;
  background: #ddd;
  overflow-y: auto;
}

JavaScript

$('#switcher').click(function() {
	$('.smartphone-position').toggleClass('close');
});