JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div id="one"></div>
<div id="two">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at neque ac massa varius dapibus eget ac nibh. Praesent molestie nibh ac felis tempus sodales eget sit amet purus. Phasellus sapien arcu, aliquet id rhoncus et, rutrum id enim. Vivamus id dui ac est dignissim adipiscing vitae in risus. Donec egestas augue mauris. Ut augue lectus, tempor at varius id, auctor ac leo. Morbi a lorem tellus. Maecenas aliquet, eros et consequat condimentum, est enim consectetur ante, nec gravida augue libero eget odio. Vivamus dictum nibh eu sapien tincidunt sed viverra dolor egestas.

Donec ultricies est sit amet metus semper et aliquam ante sagittis. Vestibulum blandit, urna non dignissim pulvinar, purus dolor volutpat lorem, eget malesuada velit quam quis magna. Suspendisse potenti. Fusce condimentum pulvinar condimentum. Ut egestas mattis libero gravida imperdiet. Ut consequat rhoncus scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed tellus tellus. In auctor, velit nec venenatis laoreet, ligula dolor rhoncus mi, ut pulvinar lectus quam at justo. Proin eu justo vel neque pharetra commodo non id nulla. In vel arcu turpis, sed vestibulum neque. Donec in facilisis arcu. Aenean adipiscing vehicula condimentum.

Fusce nec leo leo, id placerat erat. Phasellus id neque non neque placerat congue. Duis risus eros, rhoncus et tincidunt eget, egestas id neque. Pellentesque leo neque, eleifend eget molestie non, convallis id dolor. Etiam et risus luctus dui consectetur porttitor. Curabitur purus metus, hendrerit id convallis quis, faucibus non ante. Ut accumsan condimentum est vitae eleifend.

Curabitur et sapien et metus blandit ultrices at non enim. Nam dignissim mattis leo vitae iaculis. Duis vestibulum, est a porttitor aliquet, odio velit mattis magna, quis molestie turpis odio vel elit. Donec suscipit accumsan bibendum. Praesent imperdiet ante et ante sagittis vitae bibendum turpis ultricies. Integer...

CSS

#one {
    background-color: rgba(255,0,0,1);
    position: fixed;
    top: 0;
    left: 0:
    z-index: 10;
}
#two {
    background-color: rgba(0,255,0,0.3);
    width: 300px;
    height: auto;
    margin: 200px auto 0;
    position: relative;
    z-index: 20;
    padding: 10px;
}
#three {
    background-color: rgba(255,0,0,1);
    position: fixed;
    top: 0;
    left: 0;
    width: 1000px;
    height: 200px;
    z-index: 30;
}

JavaScript

$('#one').width($(window).width()).height($(window).height());