JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div id="box"></div>
<div id="infobox"></div>

CSS

#box {
    width: 300px ;
    height: 55px ;
    background-color: lightblue ;
}

#infobox {
    position: absolute ;
    top: 100px ;
    left: 100px ;
    width: 100px ;
    height: 100px ;        
    background-color: #EAEAEA ;
}

#infobox::before {
    position: absolute ;
    content: "" ;
    top: -50px ;
    left: -50px ;
    width: 6px ;
    height: 50px ;
    border-radius: 5px ;
    background-color: #FFF ;
}

#infobox::after {
    position: absolute ;
    content: "" ;
    top: -49px ;
    left: -49px ;
    width: 50px ;
    height: 50px ;
    /*background-color: #AAAAAA ;*/
    border-left: 3px dotted #000 ;
    border-bottom: 3px dotted #000 ;
}