JSFiddle - React, Tailwind, and code Playground

by romkey

HTML

<body>
    <header>
        <img src='https://photos-3.dropbox.com/t/0/AACRtSMXtkEs6A0mzBNF-_9S37oEBLkjI0Lo1xwQ7-fBDg/12/3884193/png/1024x768/3/1371952800/0/2/rvclogo.png/p017PBba0oXpXSEx5ntpXhYrbzTVs2oBOwceK1wNC3c'/>
        <img src='http://maps.googleapis.com/maps/api/staticmap?center=33+Morgan+Drive+Lebanon,NH&zoom=14&size=127x85&sensor=false&visual_refresh=true&markers=size:tiny|33+Morgan+Drive+Lebanon,NH' class='right' />
        <div>
            33 Morgan Drive<br/>
            Lebanon, NH 03766<br/>
            (603) 643-7720<br/>
            <a href='mailto:[email protected]'>[email protected]</a>
        </div>
        <nav class='clear'>
            <ul>
                <li>Fitness</li>
                <li>Spa</li>
                <li>Tennis</li>
                <li>FitKids</li>
                <li>Salon</li>
                <li>Membership</li>
                <li>Schedules</li>
                <li><input type='search' placeholder='Search RVC' /></li>
            </ul>
        </nav>
    </header>
    <div id='left'>
        <h2>News</h2>
        
    </div>
    <div id='right'>
        <h2>Calendar</h2>
    </div>

CSS

body {
    font-family: Helvetica;
    padding: 2em;
}

header img {
    float: left;
}

header div {
    float: right;
    padding-right: 1em;
    font-size: .8em;
}

nav ul {
    padding: 1em 0 0 0;
    display: table;
    list-style-type: none;
    width: 100%;
}

nav ul li {
    display: table-cell;
    font-weight: bold;
    font-size: 1.25em;
}

.clear {
    clear: both;
}


#left, #right {
    width: 50%;
}

#left {
    float: left;
}

#right, .right {
    float: right;
}