JSFiddle - React, Tailwind, and code Playground

by Martin Sjåstad

HTML

<div id="topcasing">
        <div id="top">
            <div class="content_pad">
                <div class="left">
                    <a href="<?=base_url()?>" title="UCROO - Home" class="top_logo"><img src="http://placehold.it/94x21"/>
                    </a>
                </div>
                <div class="center">
                    <ul class="top_navigation">
                        <li class="home" id="home">
                            <a class="top_link" href="<?=base_url();?>">
                                <div class="nav_icon home_icon ir">UCROO Home</div>
                            </a>
                        </li>
                        <li class="notifications" id="not">
                            <a class="top_link" href="javascript:void(0);">
                                <div class="notification_badge" id="nnot">
                                    <?=$newnotifications_count?>
                                </div>
                                <div class="nav_icon notification_icon ir">Notifications</div>
                            </a>
                            <div id="not_menu" class="popout_menu">
                                <div class="top_loader"><?=img("/assets/images/top_loader.gif")?></div>
                            </div>
                        </li>
                        <li class="messages" id="msg">
                            <a class="top_link" href="javascript:void(0);">
                                <div class="notification_badge" id="msgnot">
                                    <?=$unread_count?>
                                </div>
                                <div class="nav_icon mail_icon ir">Messages</div>
                            </a>
                            <div id="msg_menu" class="popout_menu">
                                <div class="top_loader"><?=img("/assets/images/top_loader.gif")?></div>
                            </div>
                        </li>
                  ...

CSS

/* @override 
    http://localhost.ucroo/assets/css/layout.css?1647
    http://localhost.ucroo/assets/css/layout.css?1920
    http://localhost.ucroo/assets/css/layout.css?1851
*/

body
{
    /* background: #56a7a7 url(/assets/images/bg_uc_pat.jpg) repeat-x fixed; */
    font: 12px/1.7em Verdana, Geneva, sans-serif;
    overflow-x: hidden;
}

pre, #exception_error {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(217, 154, 126, 0.8);
    color: black;
    margin: 0;
    padding: 20px;
    z-index: 10000;
}

#exception_error pre {
    position: relative;
}

#wrapper
{
    width: 100%;
}

/* --------------------------------------------------------------
   Top
-------------------------------------------------------------- */
#top,
#topcasing
{
    background-color: #004b84;
    color: #fff;
    width: 1230px;
    height: 40px;
    margin: 0 auto;
}

#topcasing
{
    width: 100%;
    border-bottom: 1px solid #003353;
}

#top .left
, #top .center
{
    float: left;
}

#top .left
{
    margin: 0 auto;
    text-align: center;
    width: 208px;
}

#top .center
{
    /*display: table;*/
}

#top .right
{
    float: right;
}

.top_link
{
    color: #ffffff;
    text-decoration: none;
    border-left: 1px solid #003353;
    padding: 0 6px;
    margin: 0;
    display: block;
    line-height: 40px;
}

.top_link:hover
{
    text-decoration: underline;
    background-color: red;
}

.top_link:active
{
    background-color: #07315A;
}

.top_navigation
{
    margin: 0;
    height: 100%;
}

.top_navigation li
{
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #0d548a;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.top_loader
{
    padding: 12px;
}

.nav_icon
{
    display: block;
    width: 26px;
    height: 40px;
    line-height: 40px;
}

.mail_icon
{
    background: url("http://placehold.it/26x26") no-repeat center center;
}

.notification_icon
{
    background:...