JSFiddle - React, Tailwind, and code Playground

by melon

HTML

<div class="map_infobox">
    <div class="title">Title goes here</div>
     <div class="copy">Nam nibh dolor, luctus eget lorem tincidunt, egestas scelerisque erat? Morbi consequat auctor ipsum, eu ultricies nisl aliquam venenatis. Fusce feugiat posuere lectus at dictum. Integer sagittis massa justo, sed pretium ante hendrerit eget.</div>
</div>

CSS

body {
    background: pink;
}


.map_infobox {
    margin: 30px 0 0 30px;
    position: relative;
    background: #FFF;
    border-radius: 10px; 
    width: 250px; 
    height: 250px;
    border-opacity: 0.3;
    border: 5px solid rgba(0, 0, 0, .2);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.map_infobox:before{
    content: "";
    position: absolute;
    top: 33px;
    left: -34px;
    z-index: 1;
    height:55px;
    width:30px;
    margin-top: -15px;
    background: linear-gradient(-45deg, white 15px, rgba(0,0,0,0.2) 16px, rgba(0,0,0,0.2) 20px, transparent 21px), linear-gradient(225deg, white 15px, rgba(0,0,0,0.2) 15px, rgba(0,0,0,0.2) 20px, transparent 20px);    
    background-position: left 0px, right bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.map_infobox:after{
    content: "";
    position: absolute;
    top: 18px;
    left: -35px;
    z-index: 1;
    height: 45px;
    width:30px;
    border-right: solid 5px white;
    border-top: solid 5px transparent;
    border-bottom: solid 5px transparent;
}