JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<meta name="viewport" content="width=device-width"/>

<div class='page flex centre '>

<div class='full centre bit flex'>

<div class='arrow bit'>prev</div>
<div class='grow bit'>Naaame</div>
<div class='arrow bit'>prev</div>

</div>

<div class='halfpage nearlyhalf centre bit flex'>
<span class='full'>Adult Female Griffin</span>
<div class='half bit'>breedname</div>
<div class='half bit'>birthday</div>
<div class='half bit'>master</div>
<div class='half bit'>age</div>
<div class='half bit'>breed name</div>
<div class='half bit'>birthday</div>
<div class='half bit'>master</div>
<div class='half bit'>age</div>
</div>

<div class='halfpage nearlyhalf centre flex spread'>

<div class='nearlyhalf height49 bit flex'>
<div class='half bla expand'>Energy: 33%</div>
<div class='half healthbar expand'><div class='healthbar_inner' style='width:33%;'></div></div>
<div class='full bla'><button>button</button></div>
</div>
<div class='nearlyhalf height49 bit flex'>
<div class='half bla expand'>Health: 44%</div>
<div class='half healthbar expand'><div class='healthbar_inner' style='width:44%;'></div></div>
<div class='full bla'><button>button</button></div>
</div>
<div class='nearlyhalf height49 bit flex'>
<div class='half bla expand'>Trust: 66%</div>
<div class='half healthbar expand'><div class='healthbar_inner' style='width:66%;'></div></div>
<div class='full bla'><button>button</button></div>
</div>
<div class='nearlyhalf height49 bit flex'>
<div class='half bla expand'>Nutri: 77%</div>
<div class='half healthbar expand'><div class='healthbar_inner' style='width:77%;'></div></div>
<div class='full bla'><button>button</button></div>
</div>

</div>

<br>



<div class='proftab thirdpage nearlythird margin5 bit' data-tab='genetic'>
  <b>Genetics</b><br>
  <span class='profile_load_genetic'>{$genetested}</span>
</div>
<div class='proftab thirdpage nearlythird margin5 bit' data-tab='ability'>
  <b>Ability</b><br>
  <span class='profile_load_ability'>Click to view...

CSS

div {box-sizing:border-box;}
.centre,.margin5 {margin:5px auto;}
.page {width:80%;}
.full {width:100%;transition: all 0.5s ease}
.half {width:50%;transition: all 0.5s ease}
.nearlyhalf {width:49%;transition: all 0.5s ease}
.third {width:33%;transition: all 0.5s ease}
.nearlythird {width:32%;transition: all 0.5s ease}
.height49 {height:49%;}

.scroll {position: relative;}
.inner {position: absolute;top:0;left: 0;width: 100%;height: 100%;overflow: auto;}

.flex {display:flex;flex-flow:row wrap;}

/* for spreading out content, not clustering like a table */
.spread {justify-content:space-between;align-content:space-between;}

/* titles and things, with small arrows at either side */
.grow {flex-grow:1;}

.bit {border:1px dotted grey;padding:5px;background-color:gold;border-radius:5px;text-align:center;}
.bla {border:1px dotted grey;}

/* 2 halves are side by side, but page widens */
@media screen and (min-width: 900px) {
  .page {width:90%;}
}
/* 2 halves are side by side, but stretch some things */
@media screen and (max-width: 900px) {
  .page {width:95%;}
  .expand {width:100%;}
  .thirdpage {width:49%;}
}
/* stack the 2 halves */
@media screen and (max-width: 600px) {
  .page {flex-direction: column;}
  .halfpage,.thirdpage,.small_expand {width:100%;}
}

.image50 {height:50px;width:50px;border:2px solid grey;border-radius:50%;}
.image30 {height:30px;width:30px;border:2px solid grey;border-radius:50%;}

.healthbar {height:25px;border:1px solid #111;border-radius:5px;background-color:#f9f8ef;text-align:left;padding:2px;}
.healthbar_inner {height:100%;width:100%;background-color:#c4b58f;border-radius:5px;}

JavaScript

var adornments = 0;
var genetic = 0;
var personality = 0;
var ability = 0;
var family = 0; var acqs = 0;

$('.proftab').click(function(){
  var tab = $(this).data('tab');
  
  if( $(this).hasClass('full') ){ // close tab now
  
    $(this).removeClass('full').addClass('nearlythird').addClass('thirdpage');
    $('.profile_load_'+tab).html( $('.vague_'+tab).html() );
    
  }else{ // expand it, load detailed info div
  
    $(this).addClass('full').removeClass('nearlythird').removeClass('thirdpage');
    $('.profile_load_'+tab).html( $('.detail_'+tab).html() );
    
  }
  
   
});