JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div  class="box tab two-side-1">123</div>
    <div class="box content two-side-2">123</div>
</div>

CSS

body {padding:8px;}
        
        .box {
            position: relative;
            background: #c9e39c;
        }

        .box:before {
            content: "";
            position: absolute;
            z-index: -1;
            box-shadow: 0 1px 10px #999;
            -webkit-box-shadow: 0 1px 10px #566;
            -moz-box-shadow: 0 1px 10px #566;
        }
        
        .one-side:before {
            top: 2px;
            bottom: -1px;
            width: 3px;
        }

        .two-side-1:before {
            top: 0;
            bottom: 0;
            right: 2px;
            left: 0;
        }
        
        .two-side-2:before {
            top: 0;
            bottom: 2px;
            right: 2px;
            left: 0;
        }
        
        .two-side-2:after {
            content: "";
            position: absolute;
            z-index: -1;
            top: -1px;
            bottom: 2px;
            right: -1px; left: 0;
            background:red;
            height:10px;
            border-top: 1px solid #a3d869;
        }

        .tab {
            border: solid #a3d869;
            border-width: 1px 1px 0 1px;
            max-width: 250px; 
            display:inline-block;
            padding: 5px 10px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            font-weight:bold;
        }

        .content {
            border: solid #a3d869;
            border-width: 0 1px 1px 1px;
            padding: 10px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }