JSFiddle - React, Tailwind, and code Playground

by Ihor Gorobets

HTML

<div class="article">
        
</div>

CSS

.article{
    position: relative;
    background: #eee;
    width: 400px;
    height: 400px;
    margin: 50px;
    box-shadow: 0 6px 10px rgba(0,0,0,.3);
}

.article:before{
    content: '';
    position: absolute;
    z-index: -1;
    
    top: 50px; left: -6px;
    width: 40px;
    height: 40px;
    
    margin: -20px 0 0;
    
    background: #005;
    border-radius: 50%;
}

.article:after{
    content: '';
    color: #fff;
    position: absolute;
    top: 50px;
    left: -6px;
    margin: -10px 0 0;
    height: 20px;
    line-height: 20px;
    width: 100px;
    
    background: #559;
    border-radius: 3px 0 0 3px/10px 0 0 10px;
}