JSFiddle - React, Tailwind, and code Playground

by shivanraptor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid h-100">
    <div class="row h-100 justify-content-center align-items-start">
        <div class="col-12 col-sm-8 h-100 bg-info text-center" id="page1">
            <p>
                Page 1<br />
                <span class="btn btn-success" id="btn_page2">To Page 2</span>
            </p>
        </div>
        <div class="col-12 col-sm-8 h-100 bg-warning" id="page2">
            <p>
                Page 2<br />
                <span class="btn btn-success" id="btn_page3">To Page 3</span>
            </p>
        </div>
        <div class="col-12 col-sm-8 h-100 bg-info" id="page3">
            <p>
                Page 3
            </p>
        </div>
    </div>
</div>

CSS

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

body {
	font-family: 'Bebas Neue', cursive;
	background-color: #000;
	color: #FFF;
	margin: 0;
	padding: 0;
}
#page2, #page3 {
    display: none;
}

JavaScript

$(document).ready(function() {
    $('#btn_page2').click(function() {
        $('#page1').hide();
        $('#page2').show();
        $('#page3').hide();
    });
    $('#btn_page3').click(function() {
        $('#page1').hide();
        $('#page2').hide();
        $('#page3').show();
    });
});