JSFiddle - React, Tailwind, and code Playground

by willemvb

HTML

<html>
<head>
</head>
<body>
    <div class=fixed>Should be fixed?</div>
    
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus luctus dui non congue. Duis malesuada nisl interdum justo facilisis rhoncus. Nunc nulla turpis, lobortis vitae aliquam at, tempor vel urna. Curabitur tristique magna at turpis mollis cursus. Quisque hendrerit dui in nunc bibendum semper. Nulla sit amet nulla non elit lobortis sodales non eget ante. Phasellus mollis consectetur odio, eget mattis nibh condimentum vel. Etiam ornare rhoncus porttitor. Duis nec gravida elit. Nullam eu massa nisi. Sed viverra pulvinar tristique. Nullam quam nibh, elementum sed lobortis nec, euismod non dolor. Fusce tempus, eros nec porta blandit, tellus felis placerat felis, non varius velit tellus non velit. Sed ut molestie neque. Nam dapibus pulvinar odio, a varius leo blandit ac. Duis non fermentum sapien.

Aenean vel accumsan nunc. Aliquam bibendum blandit erat quis porttitor. Aliquam tincidunt feugiat lorem, sed sagittis sem hendrerit ut. Curabitur accumsan laoreet lacus. Duis eleifend luctus luctus. Pellentesque in iaculis ligula. Duis eget mauris vel neque pellentesque lacinia. Proin volutpat dignissim commodo. Duis consectetur diam in ante accumsan at tempus neque rutrum. Integer vel sem sapien. Aliquam erat volutpat. Duis iaculis varius sapien, in hendrerit erat molestie a. Nulla sem dolor, dapibus in dictum nec, sodales vel odio. Fusce vel felis nec risus luctus lacinia ac euismod arcu.
    </p>    
</body>
</html>

SCSS

body{
    font-family: sans-serif;
    padding: 5em;
    //-webkit-transform: translate3D(0,0,0); /*uncomment to break fixed positioning */
   .fixed{
        position: fixed;
        top: 0; left:0;
        width: 100%;
        height: auto;
        padding: 1em;
        background: #ccc;                             
    }          
    p{
        max-width: 30em;
        line-height: 2;
    }
}