JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<section>
  <div class="d1"><h1>D1</h1> Login Form 1 asdsa dsa d f ds af ds fasd f sad fsd af sda f dsa fsda f asd fsda f</div>
  <div class="d2"><h1>D2</h1> Login Form 2 fads f sadf sda f sad f dsa fsad f dsa f dsa f dsa fsda f sad f sda fsad f sad f dsa</div>
  <div class="d3"><h1>D3</h1> Login Form 3 a f dsf asd f dsa fs da fads f dsa f dsa fdsa f sad f ads f</div>
  <button>d1</button>
  <button>d2</button>
  <button>d3</button>
</section>

CSS

@-webkit-keyframes yturn {
  from { -webkit-transform: perspective(650px) rotateY(120deg) ; opacity: 0; }
  40% { opacity: 1; }
  50% { -webkit-transform: perspective(650px) rotateY(-20deg); }
  75% { -webkit-transform: perspective(650px) rotateY(5deg); }
  to { -webkit-transform: perspective(650px) rotateY(0deg) ;; }
}


section{
  width:272px;
  margin: 50px;
  text-align: center;
}

h1{
  margin: 0;
  font-weight: bold;
}

.d1,.d2,.d3{
  width: 200px; min-height: 100px;
  padding: 30px;
  border: 6px solid #444;
  border-radius: 9px;
  font: 14px helveticaneue-light;
}

.d1{
  background-color:indianred;
}

.d2{
  background-color:olive;
}

.d3{
  background-color:lightblue;
}

button{
  margin-top: 10px;
  border-radius: 4px;
  padding: 4px 13px 3px;
  border: 1px solid black;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  font: 700 13px/18px helvetica;
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.69, rgb(61,70,115)),
    color-stop(0.15, rgb(86,94,153))
);
}

button:hover{
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.69, rgb(79,89,143)),
    color-stop(0.15, rgb(107,117,189))
);
}

button:active{
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.69, rgb(47,55,89)),
    color-stop(0.15, rgb(74,80,125))
);
}

JavaScript

(function () {
  var div_lst = document.getElementsByTagName('div');
  var btn_lst = document.getElementsByTagName('button');
                            
  //function to be called on click 
  var prev_i = 0;
  function display_block(x) {
    return function () {
      div_lst[prev_i].setAttribute('style','display:none;');
      div_lst[x].setAttribute('style','display:block; -webkit-animation: yturn 1.2s;');
      prev_i = x;
    };
  }
  
  for(var i = 0, max_i = btn_lst.length; i<max_i; i+=1){
    //add display none to all blocks but first
    div_lst[i].setAttribute('style','display:none;');  
    //assigning function to the click
    btn_lst[i].onclick = display_block(i);       
  }
  
  div_lst[0].setAttribute('style','display:block;');
  
})();