JSFiddle - React, Tailwind, and code Playground

by ducas

HTML

<link rel="stylesheet" href="http://bootswatch.com/simplex/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                </button> <a class="navbar-brand" href="#">GrowerWeb</a>

            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a>

                    </li>
                    <li class="dropdown"><a class="dropdown-toggle" href="#">Reports <span class="caret"></span></a>

                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Current ABN <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>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a>

                            </li>
                            <li class="divider"></li>
                            <li><a href="#">One more separated link</a>

                            </li>
                        </ul>
                    </li>
                   ...

CSS

@media (min-width:768px) {
    header {
        padding-top:75px;
        background: #FFFFFF url('http://www.wilmarsugarmills.com/templates/jwwilmar15/images/page.jpeg') top center no-repeat scroll;
    }
    .navbar-default {
        background: transparent;
        border: none;
    }
}