JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div id="content"><p>This is some content</p></div>

CSS

#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute;
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
    content: ' ';
}
#content:before {top:0;left:0;border-width: 5px 0 0 5px; box-shadow: 15px 15px -15px 0 inset red;}
#content:after {top:0;right:0;border-width: 5px 5px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 5px 5px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 5px 5px}