JSFiddle - React, Tailwind, and code Playground
HTML
<div class="bonecard">
Example<br />
Next line<br />
Line after
</div>
CSS
div.bonecard {
margin: 50px;
width: 3.4in;
height: 2.1in;
border: 2px solid black;
padding: 10px;
-webkit-border-radius: .2in;
-webkit-border-top-right-radius: .5in;
-webkit-border-bottom-right-radius: .5in;
-moz-border-radius: .2in;
-moz-border-radius-topright: .5in;
-moz-border-radius-bottomright: .5in;
border-radius: .2in;
border-top-right-radius: .5in;
border-bottom-right-radius: .5in;
position: relative;
}
div.bonecard:after,
div.bonecard:before
{
position: absolute;
display: block;
content: "";
border: 2px solid black;
}
div.bonecard:before
{
top: 30px;
left: -39px;
height: 40px;
width: 35px;
}
div.bonecard:after
{
top: 128px;
left: -29px;
height: 20px;
width: 25px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}