JSFiddle - React, Tailwind, and code Playground

by isochronous

HTML

<div id="container">
    <a class="fullscreen">Click to full-screen</a>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pulvinar dolor eu lectus aliquam, at vestibulum sapien lobortis. Maecenas tristique, augue id vulputate volutpat, lectus lacus laoreet quam, ac vestibulum enim metus ut libero. Etiam eleifend ipsum lacus, nec gravida arcu viverra ac. Nulla gravida varius felis nec ultricies. Sed laoreet pretium dolor at eleifend. Donec vel ultrices nisi. Aliquam sodales diam non nibh bibendum ultrices. Nam mattis, massa eu dignissim porttitor, purus nunc euismod velit, non bibendum est lectus eget urna. In ac neque ac dui fringilla iaculis in quis nibh. Vivamus mattis posuere sapien, sed tempor sem. Nullam a mattis massa, in blandit arcu. In nisl nunc, tristique non erat eu, faucibus malesuada dolor. Curabitur arcu elit, suscipit imperdiet metus sed, placerat tempus lectus.</p>

        <p>Etiam vel rhoncus justo. Aenean malesuada, leo ut elementum consectetur, purus justo volutpat nulla, at rhoncus lectus nibh nec elit. Morbi at fermentum eros. In tristique velit nibh, id varius dui eleifend a. Phasellus iaculis velit metus. Fusce euismod elit et nisi scelerisque sollicitudin sed sit amet elit. Nam eu diam nec ante ultricies faucibus. Cras lacinia ante non rhoncus convallis. Maecenas faucibus tellus ut elit congue, nec blandit mauris sodales. Nunc tincidunt sollicitudin ligula, at euismod magna pulvinar pellentesque. Praesent ultrices nulla arcu, vel luctus felis euismod eu. Vivamus vitae adipiscing arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at pulvinar odio. Morbi ut ultrices risus. Donec ultricies ligula ac lacinia hendrerit.</p>

        <p>Phasellus posuere elit a turpis ultricies ultricies a quis velit. Donec consectetur tellus sed ligula iaculis mollis. Mauris varius felis eget nisl sollicitudin adipiscing. Cras ornare vestibulum lectus nec elementum....

CSS

div#popup {
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    z-index: 99;
    background-color: #eee;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    overflow: auto;
}

JavaScript

var $popupTemplate = $('<div id="popup"><a class="close">Close Poup</a><div class="content">&nbsp</div></div>');

$('a.fullscreen').click(function (e) {
    var $el = $(e.target);
    var $content = $el.siblings('#content').html();
    var $popup = $('#popup');
    $popup = $popup.length ? $popup : $popupTemplate.clone();
    $popup.find('div.content').html($content).end().appendTo('body');
});

$(document).on('click', 'a.close', function (e) {
    $(e.target).closest('div#popup').remove();
});