JSFiddle - React, Tailwind, and code Playground

by redbmk

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec venenatis justo. Vivamus malesuada commodo nisl, at ullamcorper eros lobortis at. Nam lacinia eros aliquam nisl lacinia aliquet. Sed ac erat nec tellus eleifend molestie sed non velit. Cras quis gravida nulla. Nunc nec libero risus. Maecenas ac augue et nisl eleifend fermentum. Phasellus fermentum iaculis magna, eget interdum ante pretium id.</p>

<p>Vestibulum laoreet aliquam sapien. Nam sed quam dolor, eget lobortis sapien. Ut auctor ornare cursus. Fusce vel felis odio, eget ullamcorper justo. Nullam hendrerit mi euismod ipsum vestibulum accumsan. Etiam sed elementum dui. Duis porta lacinia lorem, id viverra libero dignissim eu. Fusce venenatis felis nec arcu pretium convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam vestibulum, sapien facilisis vestibulum ultricies, ipsum risus molestie libero, fringilla volutpat augue nisi nec nibh. Cras viverra justo sit amet justo commodo eu iaculis lectus imperdiet.</p>

<p>Fusce imperdiet nulla augue, nec malesuada eros. In lorem augue, tempus quis posuere non, vehicula nec nibh. Proin facilisis lobortis neque, in volutpat tortor tincidunt et. Pellentesque tortor augue, posuere quis porta quis, imperdiet eget orci. Mauris augue dolor, condimentum vitae adipiscing et, pulvinar vitae neque. Morbi rutrum ornare metus, eu semper enim dictum et. Morbi tempus commodo viverra. Aenean gravida nulla a lorem aliquam aliquam. Duis eleifend ullamcorper diam, vel tincidunt mauris pulvinar id. Maecenas quis est vel nisl fringilla mattis. In hac habitasse platea dictumst. Morbi in molestie ante. Pellentesque at neque felis. Donec elementum sapien sit amet nisi commodo imperdiet dapibus nisl elementum.</p>

<p>Nullam consectetur est in urna varius id imperdiet tellus condimentum. Duis molestie laoreet arcu in pretium. Pellentesque sed dui magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere...

CSS

html::before, html::after, body::before, body::after {
    display: block;
    position: fixed;
    background: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
    background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
    content: '';
}

html::before, html::after {
    height: 25%;
    left: 25%;
    right: 25%;
    background-size: 200% 400%;
}

body::before, body::after {
    width: 25%;
    top: 0;
    bottom: 0;
    background-size: 400% 100%;
}

html::before { top:    0; background-position: top;    }
html::after  { bottom: 0; background-position: bottom; }
body::before { left:   0; background-position: left;   }
body::after  { right:  0; background-position: right;  }