JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
<div class="screen">
<p>Aenean fringilla luctus mollis. Nunc fringilla dignissim diam, sed aliquam lacus aliquam sodales. Mauris dictum eu leo ac volutpat. Ut tempor lacus augue. Integer eget enim nibh. Morbi id tortor imperdiet, lobortis massa a, lobortis lectus. Duis sodales pulvinar erat, ac tempus felis tempor non. Nulla dignissim efficitur tortor, sed vehicula elit maximus quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed pellentesque risus in sapien cursus aliquet. Morbi posuere purus vitae dictum porttitor. Etiam ornare ac ipsum vel interdum.
</p><p>
Aenean molestie, nisl et posuere mattis, leo eros mattis lorem, et rutrum sem quam non libero. Curabitur mollis neque vel consectetur posuere. Maecenas ullamcorper, ligula id porttitor dictum, purus quam commodo urna, non molestie dolor purus sit amet neque. Ut tristique convallis posuere. Pellentesque egestas odio egestas accumsan rutrum. Nullam eu convallis sem, sed semper dui. Vivamus aliquam nisl urna, a convallis libero hendrerit a. Sed sed ex pulvinar, gravida magna in, pretium enim.
</p>


<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>

<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>

</div>
</div>

CSS

.container {padding:0 20px;}
.screen p {font-size:16px;line-height:26px;}
.screen {max-width:800px;margin:auto;background-color:#5A7ABC;position:relative;box-sizing: border-box;padding:20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#d0e4f7+0,73b1e7+24,0a77d5+50,539fe1+79,87bcea+100;Blue+Pipe+%231 */
background: #d0e4f7; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.left {position:absolute;top:20px;bottom:20px;left:-9px;width:20px;background-image:url(http://hloe.co.uk/images/left.png);background-position: center center;}
.right {position:absolute;top:20px;bottom:20px;right:-9px;width:20px;background-image:url(http://hloe.co.uk/images/right.png);background-position: center center;}
.top {position:absolute;top:0;left:0;height:20px;width:100%;background-image:url(http://hloe.co.uk/images/top.png);background-position: center center;}
.bottom {position:absolute;bottom:0;left:0;height:20px;width:100%;background-image:url(http://hloe.co.uk/images/bottom.png);background-position: center center;}

.tl {position:absolute;top:0;left:-9px;height:20px;width:20px;background-image:url(http://hloe.co.uk/images/tl.png);background-repeat: no-repeat;background-position: center center;}
.tr {position:absolute;top:0;right:-9px;height:20px;width:20px;background-image:url(http://hloe.co.uk/images/tr.png);background-repeat: no-repeat;background-position: center center;}
.br...