JSFiddle - React, Tailwind, and code Playground

by Dinesh Ranawat

HTML

<div id='testDiv'> </div>

CSS

#testDiv {
    height: 300px; width: 170px;
    background-color: RGB(255,146,73);
}

#testDiv:before, #testDiv:after {
    content: '';
    display: block;
    height: 75px; width: 170px;

    background: RGB(255,75,0) radial-gradient(ellipse at 4px 8px, RGB(255,146,73) 4px, RGB(255,75,0) 4px) repeat-x;
    background-size: 8px 8px;

    position: absolute;
}

#testDiv:before {
    top: 0px;
    background-position: bottom;
}

#testDiv:after {
    top: 235px;
    background-image: radial-gradient(ellipse at 4px 0px, RGB(255,146,73) 4px, RGB(255,75,0) 4px);
}