JSFiddle - React, Tailwind, and code Playground
HTML
<div class="ticket">
<div class="content">
<p>Ticket</p>
</div>
</div>
CSS
body {
background-color: #3571eb;
}
.ticket {
position: relative;
box-sizing: border-box;
width: 300px;
height: 450px;
margin: 10px auto 0;
padding: 20px;
border-radius: 10px;
background: #FBFBFB;
box-shadow: 2px 2px 15px 0px #3571eb;
}
.ticket:before, .ticket:after {
content: '';
position: absolute;
left: 5px;
height: 6px;
width: 290px;
}
.ticket:before {
top: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -8px/16px 16px repeat-x;
}
.ticket:after {
bottom: -5px;
background: radial-gradient(circle, transparent, transparent 50%, #FBFBFB 50%, #FBFBFB 100%) -7px -2px/16px 16px repeat-x;
}
.content {
box-sizing: border-box;
height: 100%;
width: 100%;
}