JSFiddle - React, Tailwind, and code Playground

by Dragonseer

HTML

<button onclick="Fullscreen()"> Fullscreen </button>
<section id="section">
     <article>
         <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eros leo, laoreet eget elementum ullamcorper, sollicitudin commodo lorem. Ut vitae dui eu velit tincidunt ultrices at ac sapien. Etiam facilisis at felis sit amet condimentum. Morbi sed tincidunt turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Suspendisse at molestie lorem. Donec at vulputate sapien. Fusce neque sapien, aliquet in vehicula eu, porttitor sed enim. Donec semper pretium risus, ut bibendum lacus congue et. Morbi sit amet dolor ac turpis blandit ultrices in non odio. Ut ligula tortor, porttitor vitae metus ut, placerat scelerisque libero. Etiam laoreet pharetra mauris, vitae fringilla nisl pharetra eu. Vestibulum lacinia ligula non diam varius, eu elementum erat tristique. Nullam vehicula enim a justo pharetra ornare.</p>
         
                 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eros leo, laoreet eget elementum ullamcorper, sollicitudin commodo lorem. Ut vitae dui eu velit tincidunt ultrices at ac sapien. Etiam facilisis at felis sit amet condimentum. Morbi sed tincidunt turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Suspendisse at molestie lorem. Donec at vulputate sapien. Fusce neque sapien, aliquet in vehicula eu, porttitor sed enim. Donec semper pretium risus, ut bibendum lacus congue et. Morbi sit amet dolor ac turpis blandit ultrices in non odio. Ut ligula tortor, porttitor vitae metus ut, placerat scelerisque libero. Etiam laoreet pharetra mauris, vitae fringilla nisl pharetra eu. Vestibulum lacinia ligula non diam varius, eu elementum erat tristique. Nullam vehicula enim a justo pharetra ornare.</p>
         
                 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eros leo, laoreet...

CSS

section
{
    width: 100%;
    min-height: 100%;
    background-color:white;

    display:flex;
    overflow: auto; 
}

article
{
    max-width:500px;
    margin-top: 50px;
    margin-bottom: 50px;
}

p
{
    border: 1px solid;
}

JavaScript

function Fullscreen()
{
    var element = document.getElementById("section");
    if (element.webkitRequestFullscreen)
    {
        element.webkitRequestFullscreen();
    }
}