JSFiddle - React, Tailwind, and code Playground

by Ryan McQuen

HTML

<div>
     <h1>Title here</h1>

    <p>some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here...</p>
</div>

CSS

div {
    position:relative;
    width:50%;
    height:300px;
    margin:10% auto;
    background:rgba(0, 0, 0, 0.7);
    border-top:6px solid rgba(0, 0, 0, 0.8);
    border-bottom:6px solid rgba(0, 0, 0, 0.8);
}
div:before, div:after {
    content:'';
    position:absolute;
    top:-6px;
    width:20%;
    height:100%;
}
div:before {
    right:100%;
    background:inherit;
    border-top:6px solid rgba(0, 0, 0, 0.8);
    border-left:6px solid rgba(0, 0, 0, 0.8);
    border-bottom:6px solid rgba(0, 0, 0, 0.8);
    -webkit-transform-origin:100%;
    transform-origin:100%;
    -webkit-transform : perspective(1px) rotateY(-0.15deg);
    transform : perspective(1px) rotateY(-0.15deg);
}
div:after {
    left:100%;
    border-top:6px solid rgba(0, 0, 0, 0.8);
    border-right:6px solid rgba(0, 0, 0, 0.8);
    border-bottom:6px solid rgba(0, 0, 0, 0.8);
    border-left:none;
    background:inherit;
    -webkit-transform-origin:0;
    transform-origin:0;
    -webkit-transform : perspective(1px) rotateY(0.15deg);
    transform : perspective(1px) rotateY(0.15deg);
}
/*following just for demo */
 body, html {
    height:100%;
    margin:0;
}
body {
    background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat;
    background-size:cover;
    color:#fff;
    font-size:1.2em;
    font-family:arial;
}