JSFiddle - React, Tailwind, and code Playground

by Rania Krourou

HTML

<div id="page-title">Title of app</div>
<div id="body1">Body 1 <button onclick="document.getElementById('body2').style.display = 'block'; document.getElementById('body1').style.display = 'none';">Next Page</button></div>
<div id="body2">Body 2 <button 
onclick="document.getElementById('body1').style.display = 'block'; document.getElementById('body2').style.display = 'none'">Previous Page</button></div>
<div id="page-footer">Footer of app</div>

CSS

html,body
{
    height: 100%;
}

#page-title
{
    background-color: blue;
    height: 20%;
}

#page-footer
{
    background-color: blue;
    height: 20%;
}

#body1, #body2
{
    height: 80%;
}

#body2
{
    display: none;
}