JSFiddle - React, Tailwind, and code Playground

by pixeline

HTML

<div class="frame">
  <div class="screen screen1">
    <button class="btn btnNext">next</button>
  </div><!-- end screen1-->
  <div class="screen screen2 active">
    <button class="btn btnBack">back</button>
  </div><!-- end screen2-->
</div><!-- end frame>

CSS

.frame {
  width: 320px;
  height: 480px;
  border: 3px solid #000;
  
  margin:0;
  
  position: relative;
}

.screen {
  width: 320px;
  height: 480px;
  
  position: absolute;
  left: 320px;
}

.screen1 {
  background: red;
  z-index:2
}
.screen2 {
  background: blue;
  z-index:1;
}

.active {
  left: 0;
}
.active2 {

  background:yellow;
}

.btn {
  width:50px;
  height:50px;
  margin: 20px 20px;
  display:inline-block;
  border-radius: 50%;
  border:none;
  
  background: #f0f0f0;
 }


/* keyframes */


/* anims */

.btn:active {
  transform: scale(0.90);
  transition: all 100ms;
}

JavaScript

$(".btn").on('click',function() {
  $('.screen.active').removeClass('active');
  $(this).parents('.screen').addClass('active');
 });