JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<header>

    <div class="container">

        <!-- logo / event info / navigation row -->
        <div class="row">

            <!-- logo -->
            <div class="col-xs-4 text-center">
                <a href="#" title="MCL" id="header-logo"><span></span></a>
            </div>

            <!-- event info / navigation -->
            <div class="col-xs-8">

                <!-- top row -->
                <div id="top-row" class="row">
                    <div class="col-xs-12">
                        <div class="background"></div>
                        <div class="overlay">
                            Directions ·
                            <a href="#">Media Site</a> ·
                            <a href="#">Contact</a> ·
                        </div>
                    </div>

                </div>

                <!-- mid row -->
                <div id="mid-row" class="row">
                    <div class="col-xs-12">
                        <div class="background"></div>
                        <div class="overlay">
                            <h5>16 July 2014</h5>
                        </div>
                    </div>
                </div>

                <!-- bottom row -->
                <div id="bottom-row" class="row">

                    <div class="col-xs-12">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                     ...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

header {
    background: #DCDCDC;
    height: 120px;
    overflow-x: hidden;
    overflow-y: visible;
}

#header-logo {
    display: block;
    width: 100%;
    max-width: 100px;
    padding: 10px;
    margin: 0px auto;
}

#header-logo span {
    display: block;
    padding-top: 100%;
    background-image: url('https://s.w.org/about/images/logos/wordpress-logo-notext-rgb.png');
    background-repeat: no-repeat;
    background-position: center middle;
    background-size: 100% 100%;
}

.background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2560px;
    border-bottom: 2px solid red;
}

.overlay {
    position: relative;
    height: 35px;
    overflow: hidden;
    line-height: 30px;
}

.container {
    max-width: 450px;
}

.dropdown:hover ul { display: block; }