JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<button class='griff'>Griff</button>

<div id='roostholder'>

<div class='roosttop' style='width:80px;'>PREV</div>
<div class='roosttop' style='width:730px;'><img src='..' style='width:90px;height:60px;float:left;margin-right:20px;'> <span class='roosttopname'>Roost: Griff Name</span><br><span class='roosttopbreed'>Age Sex Breed, Level 5 (68/104 EXP)</span></div>
<div class='roosttop' style='width:80px;'>NEXT</div>

<div id='roostmiddle'>

<div id='roost1' class='rtab' style='display:block;'>
intro stuff
</div>

<div id='roost2' class='rtab'>
detail stuff
</div>

<div id='roost3' class='rtab'>
daily c
</div>

<div id='roost4' class='rtab'>
personality? umm
</div>

<div id='roost5' class='rtab'>
adornments
</div>

<div id='roost6' class='rtab'>
<div class='roostskill'>
<div style='text-align:left;margin:10px'><b>Physical Traits</b><p>All breeds begin with certain strengths and weaknesses, but each Mythic's body shape will alter these <i>base stats</i>, to create an individual set of traits.<br>See the <b>Stats Guide</b> for a full walkthrough of how each stat is affected. Adornments can also be equipped to change these.</div>
<div class='rooststat'>Strength:<br><span style='font-size:30px;'>162</span></div>
<div class='rooststat'>Agility:<br><span style='font-size:30px;'>194</span></div>
<div class='rooststat'>Damage Reduction:<br><span style='font-size:30px;'>27%</span></div>
<div class='rooststat'>Damage Nullification:<br><span style='font-size:30px;'>8%</span></div>
<div class='rooststat'>Magic Power:<br><span style='font-size:30px;'>295</span></div>
<div class='rooststat'>Magic Resistance:<br><span style='font-size:30px;'>737</span></div>
</div>
<div class='roostskill'>
<div style='text-align:left;margin:10px'><b>Learned Spells and Moves</b><p>Blah blah. Some are learned naturally when certain breeds gain levels or age. Others can be taught from scrolls or tomes, or by visiting people and locations in (Realm).<br>See the Spell and Move Guides for full details...

CSS

#roostholder {width:1025px;height:610px;box-sizing: border-box;border:10px solid grey;border-radius:20px;padding:5px;text-align:center;}
.roosttop {margin-top:15px;display:inline-table;text-align:left;}
.roosttopname {font-size:24px;}

.roosttab {height:60px;width:130px;box-sizing:border-box;padding:5px;background-color:white;border:2px solid grey;border-radius:10px;display:inline-table;transition:0.3s;}
.roosttab:hover {background-color:yellow;transition:0.3s;cursor:pointer;}

#roostmiddle {min-height:400px;max-height:400px;box-sizing:border-box;padding:10px;margin:15px 5px;border:1px solid red;border-radius:10px;background-color:yellow;overflow:auto;}
.rtab {display:none;font-size:14px;}



.roostskill {padding:10px;background-color:white;border:1px solid grey;border-radius:10px;margin-bottom:15px;}
.rooststat {width:125px;height:85px;box-sizing:border-box;padding:5px;background-color:white;border:1px solid grey;border-radius:10px;display:inline-table;vertical-align:top;margin:5px;}
.roostspell {width:180px;height:25px;padding:5px;background-color:white;border:1px solid grey;border-radius:10px;display:inline-table;vertical-align:top;margin:7px 5px;text-align:left;}

.roostfriend {width:450px;height:160px;display:inline-table;vertical-align:top;margin:10px;background-color:white;border:1px solid grey;border-radius:10px;box-sizing:border-box;padding:5px;}
.friendtop {padding:5px;margin-bottom:10px;text-align:right;height:25px;background-color:yellow;}
.friendname {float:left;text-align:left;}
.friendsprite {width:130px;height:90px;float:left;margin:0px 10px;}
.friendtext {width:280px;height:90px;box-sizing:border-box;border:2px solid grey;border-radius:10px;padding:5px;resize:none;}

JavaScript

$('.griff').click(function(){ $('#roostholder').toggle(); });

$('.roosttab').click(function(){ 
  var rtab = $(this).data('rtab');
  $('.rtab').hide(); $('#roost'+rtab).show();  
});