JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<h1>A web page</h1>
<p>This is my normal page. blah blah blah blah blah blah blah blah blah.</p>

<span class="link" id="article-read">Click here to read an awesome lorem ipsum article!</span>

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </p>

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah...

CSS

button {
    border:0; background: transparent;
    cursor: pointer; color: inherit;
    padding: 0; margin: 0;
}
.link {color: #00F; text-decoration: underline; cursor: pointer;}

body.-no-scroll {
    overflow: hidden;
}

#article-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    overflow: auto;
    transition: transform 0.28s ease-in-out;
    transform: translateX(110%);
    z-index: 1;
    padding-top: 50px;
}
#article-container.-on {
    transform: translateX(0%);
}

#article-container > header {
    position: absolute; 
    top: 0; left: 0; right: 0;
    padding: 10px;
    color: #FFF;
    background: #000;
}
#article-container p {
  padding: 0px 50px;
  text-align: justify;
}
#article-container picture {
    display: block;
    overflow: hidden;
    max-height: 200px;
}
#article-container picture img {
    width: 100%;
    height: auto;
}

JavaScript

var readBtn = document.getElementById('article-read');
var backBtn = document.getElementById('article-back');
var container = document.getElementById('article-container');

readBtn.addEventListener('click', function(e) {
    container.classList.add('-on');
    document.body.classList.add('-no-scroll');
});
backBtn.addEventListener('click', function(e) {
    container.classList.remove('-on');
    document.body.classList.remove('-no-scroll');
});