JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="tablet-version" class="active-0">
  <div class="tablet-body" style="background: red;"></div>
  <div class="tablet-body" style="background: green;"></div>
  <div class="tablet-body" style="background: yellow;"></div>
  <div class="tablet-body" style="background: brown;"></div>
</div>

CSS

body {
  margin: 0;
}
#tablet-version {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transition: 1s;
  overflow: hidden;
  transform: translate(0,0%);
}
#tablet-version.active-0 {
  transform: translate(0,100%);
}
#tablet-version.active-1 {
  transform: translate(0,0);
}
#tablet-version.active-2 {
  transform: translate(0,-100%);
}
#tablet-version.active-3 {
  transform: translate(0,-200%);
}
#tablet-version.active-4 {
  transform: translate(0,-300%);
}
#tablet-version .tablet-body {
  width: 100%;
  height: 100%;
  position: relative;
}

JavaScript

var current = 0;
var elem = document.querySelector('#tablet-version');
document.addEventListener('click',function(){
	elem.classList.remove('active-' + current);
  current++;
  elem.classList.add('active-' + current)
})


var tabletScroll = function(){
	document.addEventListener('wheel',function(e){
  	console.log(e)
  })
}
tabletScroll();