JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<div>
    yo
</div>

CSS

html, body {
    background: #8CCEE8;
}

div {
    background: #FBFBFC;
    height: 100px;
    width: 180px;
    padding: 2em;
    margin: 2em;
    position: relative;
}

div:before,
div:after {
    content: ' ';
    display: block;
    height: 14px;
    position: absolute;
    left: 0;
    right: 0;

}
div:before{
    top: -14px;
    
    background: 
linear-gradient(45deg, #FCFCFB 25%, transparent 25%),
linear-gradient(315deg, #FCFCFB 25%, transparent 25%),
linear-gradient(225deg, #8CCEE8 25%, transparent 25%) -7px 0,
linear-gradient(135deg, #8CCEE8 25%, transparent 25%) -7px 0;
    background-size: 14px 14px;
} 
div:after{
    bottom: -14px;
    
    background: 
linear-gradient(135deg, #FCFCFB 25%, transparent 25%),
linear-gradient(225deg, #FCFCFB 25%, transparent 25%),
linear-gradient(315deg, #8CCEE8 25%, transparent 25%) -7px 0,
linear-gradient(45deg, #8CCEE8 25%, transparent 25%) -7px 0;
    background-size: 14px 14px;

}