JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="entry-wrapper">
<div class="entry-paper"></div>
some content goes here
</div>

CSS

.entry-wrapper {
    background: white;
    margin: 0 0 1.625em;
    padding: 1.625em;
    position: relative;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

.entry-paper {
    background: white;
    height: 100%;
    width: 99%;
    position: absolute;
    left: 2px;
    top: 3px;
    z-index: -1;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
}

.entry-wrapper::before, .entry-wrapper::after {
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    left: 12px;
    bottom: -2px;
    background: red;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    z-index: -2;
}

.entry-wrapper::after {
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}