JSFiddle - React, Tailwind, and code Playground

by Mysterious

HTML

<div class="tabs">
    <div class="tab__title">
        Super title
    </div>
    <div class="tab__body">
        Some content
    </div>
    
</div>

CSS

.tabs {
    padding: 20px;
}
.tab__title {
    float: left;
    position: relative;
    background: #C9E39C;
    padding: 5px 10px;
    font-size: 1.5em;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 0 3px #000;
    z-index: 2;
}
.tab__title:after {
    content: ' ';
    display: block;
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #C9E39C;
    z-index: 3;
}
.tab__body {
    padding: 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 3px #000; 
    background: #C9E39C;
    clear: left;
    min-height: 200px;    
    position: relative;
    z-index: 1;
}