JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="wrap">
    <p>
        <a href="#a">A</a>
        <a href="#b">B</a>
        <a href="#c">C</a>
    </p>
    <div id="href"></div>
<div id="a" class="page">page A</div>
<div id="b" class="page">page B</div>
<div id="c" class="page">page C</div>
</div>

CSS

#wrap {
    width:100%;
    min-height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#efefef;
}
p {
    display:-webkit-box;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index:2;
}
a {
    display:block;
    padding:10px;
    -webkit-box-flex:1;
    text-align:center;
    background:#ccc;
    border:solid 1px #999;
}

div.page {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:0
}
div.page.active {
    display:block;
}
#a {background:pink}
#b{background:lightblue}
#c{background:lightgreen}

#href{
position:absolute;
top:30px;
    left:0;
    z-index:2;
}

JavaScript

$(document).find('head').append($('<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0">'));

$(document.body).height(1004);

$('a')
    .bind('click',function(){
         $('.page').removeClass('active');
        var self = $(this);
        
            location.hash = self.attr('href');
            $(self.attr('href')).addClass('active');
            $('#href').text(location.href);
        
    });

setTimeout(function(){
    $('#wrap').css('height', window.innerHeight);
    window.scrollTo(0,1);
}, 0);

/*
$(window).bind('resize', function(){
    if(window.scrollY != 1){
        window.scrollTo(0, 1);
    }
})*/
$(window).bind('hashchange',function(){
         $('.page').removeClass('active');
        $(location.hash).addClass('active');
        $('#href').text(location.href);
    });;