JSFiddle - React, Tailwind, and code Playground

by Abra Cadabra

HTML

<div class="site-headbar">
    <div class="site-headbar-logo"></div>
    <div class="site-headbar-cta-text"></div>
    <div class="site-headbar-kids"></div>
    <div class="site-headbar-small-logo"></div>
    <div class="site-headbar-login"> <a class="button mini primary" href="#">Members Login</a>

    </div>
</div>

CSS

.site-headbar {
    height: 96px;
    background: url('http://rajajhansi.github.io/images/layout1_02.gif') repeat-x;
    position: relative;
    white-space: nowrap;
    text-align: center;
}
.site-headbar > div {
    display: inline-block;
    display: -moz-inline-stack;
    vertical-align: top;
    *display: inline;
    _height: 96px;
}
.site-headbar-logo {
    width: 96px;
    height: 96px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('http://rajajhansi.github.io/images/tha_logo.gif') no-repeat;
}
.site-headbar-cta-text {
    width: 416px;
    height: 96px;
    margin-left: 20px;
    background: url('http://rajajhansi.github.io/images/text.gif') no-repeat;
}
.site-headbar-kids {
    width: 301px;
    height: 96px;
    background: url('http://rajajhansi.github.io/images/ctaq_4_03.gif') no-repeat;
}
.site-headbar-small-logo {
    width: 75px;
    height: 96px;
    position: absolute;
    top: 0;
    right: 0;
    background: url('http://rajajhansi.github.io/images/logo.gif') no-repeat;
}
.site-headbar-login {
    position: absolute;
    bottom: 0;
    right: 20px;
}
/* the media query within our project, copy just the first selector */
 @media screen and (max-width: 894px) {
    /* no need to copy the one below */
    .site-headbar {
        width: 894px;
    }
}
/* DO NOT COPY THE FOLLOWING SINCE IT's A RESET */
 body {
    margin: 0;
    padding: 0;
}
a {
    color: white;
    background: darkblue;
}