JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!-- Site Header -->
<header>
    <h1>Headline</h1>
    <nav>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
    <form>
        <input type="text" placeholder="Suche"/>
    </form>
</header>

<!-- Site Content -->
<div role="main">
    Content
</div>

<!-- Site Sidebar -->
<aside role="complementary">
    Sidebar
</aside>

<!-- Site Footer -->
<footer>
    Footer
</footer>

CSS

/* -- normalize -- */
* { margin: 0 ; padding: 0 ; }
html, body { font-family: arial, sans-serif ; font-size: 85% ; }

/* -- layout -- */
header {
    padding: 1% ;
    background-color: #eee ;
}

header nav {
    float: left ;
}

header form {
    float: right ;
}

/** http://nicolasgallagher.com/micro-clearfix-hack/ */
header:after {
    content: ' ' ;
    display: table ;
    clear: both ;
}

div, aside {
    float: left ;
    padding: 1% ;
}

div {
    width: 68% ;
}

aside {
    width: 28% ;
}

footer {
    clear: both ;
    padding: 1% ;
    background-color: #eee ;
}