JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="talent-container">
    <div id="talent-tabs">
        <div class="row"><div class="tab"><img class="size-fix" src="http://www.sharfstudios.com/hots/images/size-fix.png"/>1</div></div>
        <div class="row"><div class="tab">4</div></div>
        <div class="row"><div class="tab">7</div></div>
        <div class="row"><div class="tab">10</div></div>
        <div class="row"><div class="tab">13</div></div>
        <div class="row"><div class="tab">16</div></div>
        <div class="row"><div class="tab">20</div></div>
    </div>
    <div id="talents">
        
    </div>
</div>

CSS

body{
    margin:0px;
}
#talent-container {
    position:absolute;
    top:48px;
    bottom:0px;
    width:100%;
    background:#666;
}

#talent-tabs {
    display:table;
    height:100%;
}
.row {
    display:table-row;
}
.tab {
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    border:1px solid #000;
}

.size-fix {
    min-height:100%;
    position:absolute;
    z-index:-100;
    display:block;
}

JavaScript

/*Talents = {
    "Give Me More!": {
        "Name": "Give Me More!",
        "Icon": "",
        "Description": "Increased Adrenaline Rush healing by 50%",
        "Modifiers": {
            "ARH": "*1.5"
        }
    },
    "Seasoned Marksman": {
        "Name": "Seasoned Marksman",
        "Icon": "",
        "Description": "For every 6 enemy Minion or Mercenary kills near your Hero, fain 1 Basic Attack damage. Hero Takedowns count as 2 Minion kills."
    },
    "Raiders Recruitment": {
        "Name": "Raiders Recruitment",
        "Icon": "",
        "Description": "Kill enemy Minions to gain stacks of Recruitment. Use 15 stacks to "recruit" a Mercenary, instantly defeating them. Does not work on Bosses. Maximum 50 stacks."
    }
}*/

$('.tab').css({"width": $('.tab').height()});
$(window).on('resize orientationChanged', function() {
    $('.tab').css({"width": $('.tab').height()});
});