JSFiddle - React, Tailwind, and code Playground

by ovfiddle

HTML

<div class="fancy-box">
    <h2>Title</h2>
    <p>Content</p>
</div>

CSS

.fancy-box{
    width:200px;
    min-height:120px;
    background:rgba(44, 44, 48, 0.9);
    border:6px solid rgba(29, 30, 35, 0.9);
    border-left:none;
    border-right:none;
    position:relative;
    top:40px;
    left:40px;
}
.fancy-box:before{
    content:"";
    display:block;
    background: rgba(44, 44, 48, 0.9);
    position:absolute;
    top:-6px;
    bottom:20px;
    width:20px;
    left:-26px;
    border:6px solid rgba(29, 30, 35, 0.9);
    border-right:none;
    border-bottom:none;
}
.fancy-box:after{
    content:"";
    display:block;
    background: rgba(44, 44, 48, 0.9);
    position:absolute;
    bottom:-6px;
    top:20px;
    width:20px;
    right:-26px;
    border:6px solid rgba(29, 30, 35, 0.9);
    border-left:none;
    border-top:none;
}

.fancy-box>p:before{
    content:"";
    display:block;
    height:0;
    width:0;
    border:13px solid rgba(44, 44, 48, 0.9);
    border-left-color:transparent;
    border-bottom-color:transparent;
    position:absolute;
    bottom:-6px;
    left:-26px;
}

.fancy-box>p:after{
    content:"";
    display:block;
    height:0;
    width:0;
    border:13px solid rgba(44, 44, 48, 0.9);
    border-right-color:transparent;
    border-top-color:transparent;
    position:absolute;
    top:-6px;
    right:-26px;
}


.fancy-box>h2:before{
    content:"";
    display:block;
    height:0;
    width:0;
    border:10px solid rgba(29, 30, 35, 0.9);
    border-left-color:transparent;
    border-bottom-color:transparent;
    position:absolute;
    bottom:0;
    left:-20px;
}
.fancy-box>h2:after{
    content:"";
    display:block;
    height:0;
    width:0;
    border:10px solid rgba(29, 30, 35, 0.9);
    border-right-color:transparent;
    border-top-color:transparent;
    position:absolute;
    top:0;
    right:-20px;
}