JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div id="wrapper">
    <section id="index">
        <h1>title</h1>
        <p id="tagline">
            <span>steadycam owner</span>&nbsp;
            <span>&amp; operator</span>
        </p>
        <nav>
            <ul>
                <li>item one</li>
                <li>second link</li>
                <li>another here</li>
                <li>the last</li>
            </ul>
        </nav>
    </section>
    <div id="content"></div>
</div>

SCSS

body {
    background: #fefefe;
    box-sizing: border-box;
    margin: 0;
    padding: 11.25% 11.25% 0;
    width: 100%;
}

#wrapper {
    display: block;
    min-height: 100px;
    position: relative;
    width: 100%;
}

h1 {
    margin: -0.9em 0 0;
    top: 0;
    padding: 0;
    position: absolute;
}

#tagline {
    color: #999;
    display: inline-block;
    font-style: italic;
    top: 0;               /* push to top of wrapper */
    margin: -0.9em 0 0;   /* elevate to align basline with top */
    padding: 3.77% 0 0;   /* push back down by correct percentage */
    position: absolute;
    width: 30%;           /* has to be less than left margin on #content */
    span {
        display: inline-block;
    }
}

nav {
    color: #444;
    left: 0;
    margin: -0.9em 0 0;
    padding: 11.25% 0 0;
    position: absolute;
    top: 0;
    width: 30%;
    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

#content {
    background: #f1f1f1;
    display: block;
    /* margin-left: 23.7%; */
    margin-left: 38.2%;
    padding-top: 3.77%;
    /* width: 76.3%; */
    width: 61.8%;
}