JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<div id="content">        
        <ul id="tabs_ttl">
            <li>
                <a href="#s1">1st ttle</a>
            </li>
            <li>
                <a href="#s2">2nd ttle</a>
            </li>
            <li>
                <a href="#s3">3rd ttle</a>
            </li>
            <li>
                <a href="#s4">4th ttle</a>
            </li>
        </ul>
        <div id="tabs_inn">
            <div id="s1">1111111111111</div>
            <div id="s2">2222222222222</div>
            <div id="s3">3333333333333</div>
            <div id="s4">4444444444444</div>
        </div>
</div>

CSS

#tabs_inn {
    position:relative;
    width: 200px;
    height: 100px;
    background-color: lime;
}

#tabs_inn > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100px;
    background-color: #FFF;
}

#tabs_inn > div:first-child,
#tabs_inn > div:target {
    display: block;
}