JSFiddle - React, Tailwind, and code Playground

by DiegoTc

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: 50px;
    left: -30px;
    height: 40px;
    width: 26px;
}

div.bonecard:after
{
    top: 140px;
    left: -24px;
    height: 20px;
    width: 20px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}