JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='full bg flex'>

<div class='half bg'>Greetings, {$screenname}.</div> <div class='half bg'>Date, time....</div>

<div class='half flex'>
<div class='grow bg'>hp bar...</div>
<div class='grow bg'>mp bar...</div>
</div>
<div class='half flex'>
<div class='grow bg'>messages...</div>
<div class='grow bg'>money...</div>
<div class='grow bg'>gems...</div>
</div>

</div>

<div class='full flex spread'>
<div class='nav_button' data-tab='1'>Home</div>
<div class='nav_button' data-tab='2'>Flock</div>
<div class='nav_button' data-tab='3'>Local</div>
<div class='nav_button' data-tab='4'>World</div>
<div class='nav_button' data-tab='5'>Islands</div>
<div class='nav_button' data-tab='6'>Business</div>
<div class='nav_button' data-tab='7'>Office</div>
<div class='nav_button' data-tab='8'>Community</div>
</div>
<div class='nav_panel bg flex'>

<span class='nav_hide'>hide</span>
<div class='nav_area grow'></div>

<div class='hidden nav_menu1'>
  <div class='flex spread'>
  <div class='nav_link'><img src=''><br>News</div>
  <div class='nav_link'><img src=''><br>Help Guide</div>
  <div class='nav_link'><img src=''><br>Rules</div>
  <div class='nav_link'><img src=''><br>Support Us</div>
  <div class='nav_link'><img src=''><br>Contact Us</div>
  <div class='nav_link'><img src=''><br>Just for Fun</div>
  <div class='nav_link'><img src=''><br>Mythnest</div>
  <div class='nav_link'>.</div>
  </div>
</div>
<div class='hidden nav_menu2'>
<div class='flex spread'>
  <div class='nav_link'><img src=''><br>Flock</div>
  <div class='nav_link'><img src=''><br>Breeding</div>
  <div class='nav_link'><img src=''><br>Incubation</div>
  <div class='nav_link'><img src=''><br>Free Nest</div>
  <div class='nav_link'><img src=''><br>Strays</div>
  <div class='nav_link'><img src=''><br>Memorial</div>
  <div class='nav_link'>.</div>
  <div class='nav_link'>.</div>
  </div>
</div>
<div class='hidden nav_menu3'>
  <div class='flex spread'>
  <div class='nav_link'><img src=''><br>Local Map</div>
 ...

CSS

* {box-sizing: border-box;}
.full {width: 90%;margin:auto;} .half {width:50%;} .grow {flex-grow:1;}
.spread {justify-content:space-between;align-content:space-between;}

.flex {display:flex;flex-flow:row wrap;}
.nav_button {
 background: white;
 border: 3px solid gold;
 width:11%;
 padding: 5px;
 text-align: center;
 text-decoration: none;transition:0.2s;
}
.nav_button:hover {background: gold;cursor:pointer;transition:0.2s;}
.sel {border:1px solid red;background-color:white;}
.bg {border:1px dotted grey;padding:5px;}

.nav_panel {display:none;}
.hidden {display:none;}
.nav_link {border:1px dotted grey;padding:5px;width:12%;text-align:center;}
.nav_link img {width:100%;height:50px;}

@media all and (max-width: 600px) {
.nav_button,.nav_link { width: 25%;}
}
@media all and (max-width: 400px) {
.nav_button,.nav_link { width: 50%;}
.half {width:100%;}
}

JavaScript

var tabopen = 0;
$('.nav_button').click(function(){
    var tab = $(this).data('tab');
    $('.nav_panel').slideDown(200);
    
    if(tabopen != tab){
    tabopen = tab;
    
    $('.nav_area').fadeOut(100, function(){
    $(this).html( $('.nav_menu'+tab).html() );
    }).fadeIn(100);
    
    $('.nav_button').removeClass('sel');
    $(this).addClass('sel');
    }
    else{ // already open; close
    $('.nav_panel').slideUp(200);
    $('.nav_button').removeClass('sel');
    tabopen = 0;
    }
});

$('.nav_hide').click(function(){
    $('.nav_panel').slideUp(200);
    $('.nav_button').removeClass('sel');
});