JSFiddle - React, Tailwind, and code Playground

by Jeff

HTML

<div id="top"></div>
<div id="nav"></div>
<div id="banner">
    <div class="name-title">
        <div class="name">
            Raynor
        </div>
        <div class="title">
            Renegade Commander
        </div>
    </div>
    <div class="details clearfix">
        <div class="text-container">
            <div class="text">
                Ranged Assassin
            </div>
        </div>
        <img src=""/>
    </div>
</div>

CSS

body {
    margin:0px;
}

* {
    box-sizing:border-box;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

#top {
    background:#999;
    height:64px;
}

#nav {
    background:#666;
    height:48px;
}

#banner {
    background:#417;
}

.name-title {
    padding:8vmin 0 8vmin 6vmin;
}

.name {
    color:#FFF;
    font-size:160%;
}

.title {
    color:#AAF;
    font-size:120%;
}

.details {
    background:rgba(0,0,0,0.3);
    color:#AAA;
    font-size:100%;
    padding:0 4vmin;
    line-height:1;
}

.details > .text-container {
    display:table;
    position:absolute;
    height:8vmin;
}

.text-container > .text {
    display:table-cell;
    vertical-align:middle;
}

.details > img {
    height:4vmin;
    width:4vmin;
    margin:2vmin 0;
    float:right;
}