JSFiddle - React, Tailwind, and code Playground

by webviper

HTML

<div id="tab1" class="open" role="tab" tabindex="1">
    <div role="tabpanel" class="desc">
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <a class="close">close</a>
</div>

<div id="tab2" class="open" role="tab" tabindex="1">
    <div role="tabpanel" class="desc">
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
    </div>
    <span role="button" tabindex="0" class="close">close</span>
</div>

CSS

body {
    background: #CCC;
}
.desc {
    background: #333;
    padding: 0 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 22px;
}
.desc p {
    cursor: text;
    color: #FFF;
}
.close {    
    display: none;
    width: 100%;
    height: 22px;
    background: #FF6;
    border-radius: 5px 5px 0 0;
    text-indent: 10px;
    cursor: default;
    border-bottom: 1px dotted #000;
    position: absolute;
    top: 0px;
    left: 0;
}
.close:hover {   
    background: #f5ff27;
}
.open:before {
    content: 'open';
    border-bottom: 1px dotted #000;
    cursor: default;
    text-indent: 10px;
    border-radius: 5px 5px 0 0;
    width: 100%;
    height: 22px;
    background: #FF6;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
}
.open:hover:before {
    background: #f5ff27;
}
.open {
    margin: 5px 0 0 15px;
    height: 23px;  
    width: 240px;
    outline: none;
    float: left;
    position: relative;
    overflow: hidden;
    -webkit-transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -ms-transition: height 0.3s ease;
    -o-transition: height 0.3s ease;
    transition: height 0.3s ease;
}
.open:focus {
    height: 122px;
}
.open:focus .close {
    display: block;
}
.open:focus:before {
    display: none;
}