JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="container" id="c">
    <button>Show widths</button>
    <span class="display"></span>
    <h2 class="header">Header 1</h2>
    <p>Phasellus vitae neque eu ante varius elementum. Curabitur efficitur faucibus erat, eget aliquam leo fringilla eu. In hac habitasse platea dictumst. Phasellus tempor nibh nec mauris lobortis eleifend a sed dolor. Cras tellus lacus, dictum id quam porta, mollis tempor arcu. Maecenas faucibus sollicitudin augue, vitae scelerisque nunc cursus eu. Ut interdum aliquam tellus at commodo. Curabitur hendrerit finibus turpis ac feugiat. Donec ac mollis ex, eu convallis urna. Curabitur nec laoreet diam, ut dignissim nisl. Etiam suscipit sem a porta euismod. 1</p>
    <h2 class="header">Header 2</h2>
    <p>Phasellus vitae neque eu ante varius elementum. Curabitur efficitur faucibus erat, eget aliquam leo fringilla eu. In hac habitasse platea dictumst. Phasellus tempor nibh nec mauris lobortis eleifend a sed dolor. Cras tellus lacus, dictum id quam porta, mollis tempor arcu. Maecenas faucibus sollicitudin augue, vitae scelerisque nunc cursus eu. Ut interdum aliquam tellus at commodo. Curabitur hendrerit finibus turpis ac feugiat. Donec ac mollis ex, eu convallis urna. Curabitur nec laoreet diam, ut dignissim nisl. Etiam suscipit sem a porta euismod. 2</p>
    <h2 class="header">Header 3</h2>
    <p>Phasellus vitae neque eu ante varius elementum. Curabitur efficitur faucibus erat, eget aliquam leo fringilla eu. In hac habitasse platea dictumst. Phasellus tempor nibh nec mauris lobortis eleifend a sed dolor. Cras tellus lacus, dictum id quam porta, mollis tempor arcu. Maecenas faucibus sollicitudin augue, vitae scelerisque nunc cursus eu. Ut interdum aliquam tellus at commodo. Curabitur hendrerit finibus turpis ac feugiat. Donec ac mollis ex, eu convallis urna. Curabitur nec laoreet diam, ut dignissim nisl. Etiam suscipit sem a porta euismod. 3</p>
    <h2 class="header">Header 4</h2>
    <p>Phasellus vitae neque eu ante varius...

CSS

body {
   
}
.container {
    padding: 1.5em;
    font-family: Arial;
    background-color: blue;
    color: white;
    line-height: 1.5em;
    font-size: 1em;
    width: 500px;
    margin: 0 auto;
    
}
* + * {
    margin-top: 1.5em;
}
.header {
    font-size: 3em;
}

@media screen and (max-width: 768px) {
    .container {
       /* background-color: yellow;*/
}

JavaScript

$("button").click(function(){
    var scrollW = document.getElementById('c').scrollWidth;
    $(".display").text("scrollWidth=" + scrollW + "px. clientWidth=" + document.body.clientWidth + "px. innerWidth=" + window.innerWidth +"px");
});