JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="app">
  

<div class="page active" id="home">
  home
</div>
<div class="page" id="about">
    about
</div>
<div class="page" id="contact">
    contact
</div>
<div class="navigation">
  <button class="home active" data-target="home">home</button>
  <button class="home" data-target="about">about</button>
  <button class="home" data-target="contact">contact</button>
</div>
</div>

SCSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

.app {
  width: 360px;
  height: 480px;
  border: 1px solid black;
  position: relative;
  
  .navigation {
    position: absolute;
    bottom: 0;
    background: #333;
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    left: 0;
    padding: 20px;
  }
}

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  top:10%;
  z-index: -1;
  left: 0;
  pointer-events: none;
  transition: all 0.25s ease-in-out;
  background: #fff;
  padding: 50px;
  
  &.active {
    top:0;
    opacity: 1;
    pointer-events: all;
  }
}

JavaScript

$('button').on('click', function(){
	var el = $(this).attr('data-target');
  
  $('.page').addClass('animated fadeOutDown').removeClass('active');
  
  $('#' + el).addClass('active');
  
});