JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<div class="wrapper">
    <!-- (h1{heading}>p>lipsum) -->
</div>

CSS

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

.wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
}

JavaScript

//generate html
var html = "<h1>some heading</h1><p>some text goes here for the paragraph</p>";

var n=10;
while (n--)
$('.wrapper').append(html);

//get the width of effectively view port ( that includes scrollbar )
$('.wrapper').prepend("<h2>"+$('.wrapper').width()+"px</h2>");