JSFiddle - React, Tailwind, and code Playground

by walkerneo

HTML

<div id="trollmegle" >
    <h1>TrollMegle 2.0</h1>
    <div id="tabs">
        <div id="tabmain" class="tab">
            Main
        </div>
        <div id="tabascii" class="tab">
            ASCII
        </div>
        <div id="tabsettings" class="tab">
            Settings
        </div>
        <div id="tababout" class="tab">
            About
        </div>
        
    </div>
    <div id="content">
        <div id="contentmain" class="content">
            <div class="opt" >CAPS <input id="optCaps" type="checkbox" /></div>
                <div class="opt" >RanDOm CaPS <input id="optRCaps" type="checkbox" /></div>
                <div class="opt" > Imitate stranger <input checked="checked" id="optIm" type="checkbox" /></div>
                <div class="opt" >Flip Text <input id="optFlip" type="checkbox" /></div>
                <div class="opt" > Tell them to stop typing <input id="optStopType" type="checkbox" /></div>
                 <div class="opt" > Legitify imitation <input id="optlegit" checked="checked" type="checkbox" /></div>
                <input onclick="window.flood()" style="padding:8px" type="button" value="Flood" />
        </div>
        <div id="contentascii" class="content">
            ascii Content
        </div>
        <div id="contentsettings" class="content">
            settings Content
        </div>
        <div id="contentabout" class="content">
            about Content
        </div>
    </div>
</div>

CSS

#trollmegle{
    -webkit-border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-topright: 30px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-radius-topright:15px;
    font-family: Century Gothic, sans-serif;
    background:#6DC3FC;
    position:relative;
    height:350px;
    width:350px;
}
#trollmegle h1{
    font-weight:bold;
    font-size:40px;
    color:white;
    padding:30px 0px 0px 40px;
}
#tabs{
    position:absolute;
    top:100px;
}
.tab{
    cursor:pointer;
    display:inline;
    padding:10px;
    padding-bottom:3px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background:white;
    border: 1px solid #AEC8F5;
    
}
#content{
    position:absolute;
    top:125px;
    
}
.content{
    background:#1B91E0;
    position:absolute;
    display:none;
    padding:20px;
    height:185px;
    width:310px;
}
#contentmain{
    display:block;
}
.opt{
    border-radius:5px;
    -moz-border-radius:5px;
    padding:5px;
    margin:3px;
    display:inline-block;
    background:#AEC8F5;
}

JavaScript

window.onload=function(){
    tabs=document.querySelectorAll('.tab');
    for(i=0;i<tabs.length;i++){
        tab=tabs[i];
        tab.onclick=function(){
            id=this.id.match(/tab(\w+)/)[1];
            othercontent=document.querySelectorAll('.content');
            for(j=0;j<othercontent.length;j++){
                cur=othercontent[j];
                cur.style.display= cur.id=='content'+id ? 'block' : 'none';
            }
            
        }
    }
}