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(array('src'=>"assets/images/ucroo-logo-white-shadow.png", 'title'=>'UCROO', 'alt'=>'UCROO', 'width' => '94', 'height' => '21'))?>
                    </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...

CSS

#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;
    position: relative;
}

.top_link:hover
{
    text-decoration: underline;
    background-color: #00467C;
}

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

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

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

.top_navigation form
{
    border-left: 1px solid #003353;
}

.top_loader
{
    padding: 12px;
}

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

.mail_icon
{
    background: url(/assets/images/menu/message_icon.png) no-repeat center center;
}

.notification_icon
{
    background: url(/assets/images/menu/bell_icon.png) no-repeat center center;
}

.home_icon
{
    background: url(/assets/images/menu/home_icon.png) no-repeat center center;
}

.account_icon
{
    padding-left: 26px;
    padding-right: 11px;
    background: url(/assets/images/menu/account_settings_icon.png) no-repeat center left;
    font-weight: bold;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 1px 0 0 #003353;
}

.notification_badge
{
    position: absolute;
    top: 4px;
    right: 0;
    color: #fff;
    background-color: #c53525;
    -moz-box-shadow: 0 1px 1px #404040;
    -webkit-box-shadow: 0 1px 1px #404040;
    box-shadow: 0 1px 1px #404040;
   ...