JSFiddle - React, Tailwind, and code Playground

by refhat

HTML

<div id = "container"></div>
<div>
<ul class="tabs">
        <li><a href="#tab1">My Quests</a></li>
        <li><a href="#tab2">Friends</a></li>
        <li><a href="#tab3">Find</a></li>
    </ul>

    <div class="tab_container">
        <div id="tab1" class="tab_content">
            First Left Tab
        </div>
        <div id="tab2" class="tab_content">
           Inner Tab (Right)
            <div id="tab3" class="tab_content">
          Second Tab (Right)
        </div>
        </div>
        
    </div>
</div>

CSS

#tab1{float:left;width:150px;height:50px;background-color:yellow;}
#tab2{float:left;width:150px;height:50px;background-color:#122227;}
#tab3{float:left;width:150px;height:50px;background-color:red;}