JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<nav id="top"></nav>
<div id="Hero">
    <div class="icon">
        <img src="http://www.heroesfire.com/images/wikibase/icon/heroes/raynor.png"/>
    </div>
    <div class="info">
        <h1>Raynor</h1>
        <small>Ranged | Assassin</small>
    </div>
    <div class="uicon">
        <img src="http://www.heroesfire.com/images/wikibase/icon/franchise/starcraft-universe.png"/>
    </div>
</div>
<div id="Stats">
    <div class="stat-cont">
        <div class="stat">
            725
            <div class="health">Health</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            1.51
            <div class="health">Regen</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            500
            <div class="mana">Mana</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            3
            <div class="mana">Regen</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            1.25
            <div class="atksec">Atk/Sec</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            6.50
            <div class="damage">Range</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            35
            <div class="damage">Damage</div>
        </div>
    </div>
    <div class="stat-cont">
        <div class="stat">
            43.75
            <div class="damage">DPS</div>
        </div>
    </div>
</div>
<div id="Talents">
    <div class="cont">
        <div class="row">
            <div class="label">
                <span>1</span>
            </div>
            <div class="talent"></div>
            <div class="talent"></div>
            <div class="talent"></div>
            <div class="talent"></div>
        </div>
        <div class="row">
            <div class="label">
                <span>4</span>
            </div>
            <div...

CSS

* {
    box-sizing:border-box;
}
body{
    margin:0px;
    font-family:Verdana;
}

#top {
    background:#565656;
    border-bottom:1px solid #777;
    height:48px;
}

#Hero{
    background:#2F3538;
    height:64px;
    padding:8px;
}

#Hero .icon {
    height:48px;
    width:48px;
    float:left;
}

#Hero .icon img {
    height:48px;
    border:1px solid #777;
    border-radius:3px;
}

#Hero .icon:hover img {
    border-color:#268CBF;
}

#Hero .info {
    float:left;
    margin-left:8px;
}

#Hero .info h1 {
    color:#268CBF;
    margin:0px;
    font-size:130%;
}

#Hero .info small {
    color:#777;
}

#Hero .uicon {
    height:48px;
    width:48px;
    float:right;
}

#Hero .uicon img {
    height:48px;
}

#Stats {
    background:#2F3538;
    height:56px;
    padding:0px 8px 8px 0px;
}

#Stats .stat-cont {
    width:12.5%;
    padding-left:8px;
    height:48px;
    float:left;
    display: table;
}

#Stats .stat-cont .stat {
    width:100%;
    height:100%;
    border:1px solid #777;
    border-radius:3px;
    background:#1A1D1F;
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    color:#EEE;
}

#Stats .stat-cont .stat .health {
    color:#E6892E;
}

#Stats .stat-cont .stat .mana {
    color:#2EE6E6;
}

#Stats .stat-cont .stat .atksec {
    color:#2EE62E;
}

#Stats .stat-cont .stat .damage {
    color:#E62E2E;
}

#Talents {
    background:#2F3538;
    padding:0px 8px 8px 8px;
}

#Talents .cont {
    width:100%;
    height:100%;
    border:1px solid #777;
    border-radius:3px;
    background:#1A1D1F;
    padding:8px;
    padding-top:0px;
}

#Talents .cont .row {
    margin-top:8px;    
}

#Talents .cont .row:before, #Talents .cont .row:after {
    content:" ";
    display:table;
    
}

#Talents .cont .row:after {
    clear: both;
}

#Talents .cont .row .label {
    background:#2F3538;
    border:1px solid #777;
    border-radius:3px;
    height:48px;
    width:48px;
    color:#EEE;
    display:table;
    float:left;
}

#Talents...