JSFiddle - React, Tailwind, and code Playground

by jack_pallot

HTML

<div class="wrapper">
    <header>Logo</header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
    </nav>
    <div class="column"></div>
    <div class="column"></div>
    <footer>Footer</footer>
</div>

CSS

/* example layout, some widths may be increased because of the additional 2px border */

* {
    margin; 0;
    padding: 0;
    border: 1px solid red; /* borders will give you an example of the box model */
}

.wrapper {
    width: 800px;
    margin: 0 auto;
}

header {
    width: 100%;
    background: blue;
    color: #fff;
}

nav {
    background: yellow;
}

nav ul {
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
}

.column {
    display: inline-block;
    margin-right: -4px; /* inline-block spacing fix */
    width: 400px;
    height: 400px;
}

footer {
    width: 100%;
    background: pink;
}