JSFiddle - React, Tailwind, and code Playground

by marikasanuki

HTML

<div id="container">
    <header class="logo-box">
        <a href="http://www.parade.com">
            <img class="logo" src="http://www.parade.com/wp-content/themes/wp-theme/img/logos/parade_regular.gif"/>
        </a>
    </header>
    <div id="content">
        <article class="container above">
            <figure class="element feature">
                <img class="featured-image" src="http://www.parade.com/wp-content/uploads/2013/07/moon-park-promo.jpg" />
            </figure>
             <h1 class="element headline">Lawmakers Propose a National Park on the Moon </h1>

            <div class="element body">
                <p>Two legislators introduced a bill this week that would establish a national park on the surface of the moon.</p>
                <p>Called the Apollo Lunar Landing Legacy Act, the bill calls for the creation of an historic national park on the lunar surface to preserve artifacts from past Apollo missions.</p>
                <p>"It is necessary to protect the Apollo lunar landing sites for posterity," the <a href="http://news.yahoo.com/moon-bill-create-national-park-protect-apollo-landing-110016060.html" target="_blank">bill reads</a>. "Creating such a park will expand and enhance the protection and preservation of the Apollo lunar landing sites, and provide for greater recognition and public understanding of this singular achievement in American history."</p>
            </div>
        </article>
        <div class="container below">
            <aside class="box left">
                <a href="http://www.parade.com/52940/maurahehir/halle-berry-and-olivier-martinez-getting-married-this-weekend/">
                    <img class='element image' src="http://www.parade.com/wp-content/uploads/2013/07/halle-olivier-ftr-1024x640.jpg" />
                </a>

            </aside>
            <aside class="box below right">
                <a...

CSS

#content {
    background: #e5e5e5;
}
#container {
    width: 320px;
    height: 480px;
    /* old iPhone size */
    background: #000;
}
.body {
    padding: 0px 20px 0px 20px;
}
.box {
    border: 10px solid #000;
}
.box > a {
    background: #000;
}
.above {
    border: 10px solid #000;
}
.below {
}
.left {
    float: left;
    border-top:0px;
}
.right {
    float: right;
    border-top: 0px;
}
.menu {
    padding: 5px 20px 10px 20px;
    list-style-type: none;
    margin: 0;
}
.menu-button {
    width: 100%;
    color: #fff;
    float: left;
}
.logo-box {
    width: 360px;
    /* 236x52 */
    height: 60px;
    padding: 10px 0 10px 0;
    text-align: center;
    background: #d82027;
}
.logo {
    height: 52px;
    width: 236px;
}
footer {
    clear: both;
    background: #000;
}
.headline {
    padding: 0 20px 0 20px;
    width: 360px;
}
.image {
    height: 121px;
    width: 145px;
}
.featured-image {
    width: 100%;
}