JSFiddle - React, Tailwind, and code Playground

by smombartz

HTML

<div id="content">
    <div id="page1" class="page">
        <!-- Content Area 1 -->        
    </div>
    <div id="page2" class="page">
        <!-- Content Area 1 -->        
    </div>
</div>

CSS

html,body {
        height: 50%;    
        overflow: hidden;
    }

    #content {
        position: relative;
        height: 50%;
    }
    .page {
        position: absolute;
        top:0;

        height: 50%;  
        width: 50%;
    }
    #page1 {
        background: #d94e4e;
        left:-50%;
        -webkit-animation: left-to-right 5s linear forwards;
        animation: left-to-right 5s linear forwards;
    }
    #page2 {    
        background: #60b044;    
        left:0;    
        -webkit-animation: right-to-left 5s linear forwards;
        animation: right-to-left 5s linear forwards;
    }

    @-webkit-keyframes left-to-right{
        from{left:-50%}
        to{left:0}
    }
    @-webkit-keyframes right-to-left{
        from{left:0}
        to{left:50%}
    }

    @keyframes left-to-right{
        from{left:-50%}
        to{left:0}
    }
    @keyframes right-to-left{
        from{left:0}
        to{left:50%}
    }