JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<div class="content-pane panel-2 flip">Bacon ipsum dolor sit amet pig ball tip chuck tail shankle meatloaf pork loin. Doner landjaeger short loin meatball pork loin, pork chop biltong filet mignon t-bone. Frankfurter porchetta pancetta ribeye ham tongue ball tip flank jowl cow meatloaf salami. Shankle beef sausage pig pork chop bresaola, meatloaf short loin pork belly strip steak doner spare ribs. Chicken porchetta cow shoulder flank swine ham bacon. Ham pork loin prosciutto pastrami venison filet mignon brisket short ribs tongue pig chicken. Ham kielbasa porchetta leberkas biltong pork belly turkey ball tip drumstick. Chicken bacon cow biltong boudin ribeye kevin andouille, sausage kielbasa ball tip capicola. Corned beef brisket bresaola pork belly swine meatball pancetta meatloaf sausage biltong shoulder. Hamburger meatball biltong meatloaf spare ribs. Chuck swine leberkas shank meatloaf venison. Pork ham hock rump meatloaf chicken corned beef ball tip tail prosciutto shankle strip steak. Pig jowl filet mignon biltong ground round turkey ham cow chuck ball tip beef shank chicken kielbasa. Short loin landjaeger pork turducken beef boudin, ham hock pancetta tail ball tip sausage shank. Jerky short ribs jowl strip steak rump landjaeger. Boudin ground round frankfurter, pork chop filet mignon bacon shank meatloaf fatback tongue brisket flank pig pastrami. Rump bresaola corned beef jerky pastrami ball tip. Pork loin spare ribs sirloin fatback drumstick salami. Salami venison landjaeger spare ribs biltong, pork corned beef bacon. Corned beef biltong capicola beef. Frankfurter kielbasa drumstick, jowl beef pork filet mignon jerky ground round shank hamburger pork chop bresaola. Andouille sirloin shankle jowl capicola ribeye, beef tail kielbasa turducken ham rump meatball pork belly. Spare ribs rump ham, chuck tail pork ham hock ground round meatball tongue leberkas salami hamburger. Brisket shankle pig flank.</div>
<div class="content-pane current panel-1 in...

CSS

.content-pane {

    position: absolute;

    top: 0px;

    left: 10px;

    display: none;

}

.current {

    display: block;

    overflow: hidden;

    width: 100%;

    height: 100%;

}

.panel-1 {

    background-color:#c30000;

}

.panel-2 {

    background-color:#00c300;

}
}
.animated {
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
.flip {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-animation-duration: .65s;
    -o-animation-duration: .65s;
    -webkit-animation-duration: .65s;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
    animation-duration: .65s;
}
.flip.out {
    -moz-animation-name: flipouttoleft;
    -o-animation-name: flipouttoleft;
    -webkit-animation-name: flipouttoleft;
    -moz-transform: rotateY(-180deg) scale(.8);
    -ms-transform: rotateY(-180deg) scale(.8);
    -o-transform: rotateY(-180deg) scale(.8);
    -webkit-transform: rotateY(-180deg) scale(.8);
    transform: rotateY(-180deg) scale(.8);
    animation-name: flipouttoleft;
}
.flip.in {
    -moz-animation-name: flipinfromleft;
    -o-animation-name: flipinfromleft;
    -webkit-animation-name: flipinfromleft;
    -moz-transform: rotateY(0) scale(1);
    -ms-transform: rotateY(0) scale(1);
    -o-transform: rotateY(0) scale(1);
    -webkit-transform: rotateY(0) scale(1);
    transform: rotateY(0) scale(1);
    animation-name: flipinfromleft;
}
@-webkit-keyframes flipinfromleft {
    from {
        -moz-transform: rotateY(180deg) scale(.8);
        -ms-transform: rotateY(180deg) scale(.8);
        -o-transform: rotateY(180deg) scale(.8);
        -webkit-transform:...

JavaScript

var p1 = document.querySelector(".panel-1"),
    p2 = document.querySelector(".panel-2");


p1.addEventListener("click", function(){

   p1.classList.remove("in");
   p1.classList.add("out");
    p2.classList.add("current");
   p2.classList.add("in");

    setTimeout(1000, function(){
        p1.classList.remove("current");
    });
});