JSFiddle - React, Tailwind, and code Playground

by Nevear

HTML

<div class="holder">
        <div class="main"></div>
        <div class="corner"></div>
    </div>

CSS

.holder { 
        position:relative;
        width: 180px;
        margin:30px
    }
    
    .main {
        width: 160px;
        height: 40px;
        border: 1px solid grey;
        position:absolute; 
        left:0;
        z-index: 1;
    }
    .corner { 
        border-bottom: 1px solid grey;
        width:30px; 
        height: 41px; 
        position:absolute;
        top:-25px;
        right:0;
        z-index:2;
        background:#fff;
        
        /* Safari */
        -webkit-transform: rotate(45deg);    
        /* Firefox */
        -moz-transform: rotate(45deg);    
        /* IE */
        -ms-transform: rotate(45deg);    
        /* Opera */
        -o-transform: rotate(45deg);
    }