JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="header">
        <h2>This is header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo quae consequatur, dolores magni fuga tempora excepturi obcaecati quod iure quas soluta ex voluptate culpa voluptas sed atque numquam aliquid. Id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo quae consequatur, dolores magni fuga tempora excepturi obcaecati quod iure quas soluta ex voluptate culpa voluptas sed atque numquam aliquid. Id.</p>
    </div>
    <ul class="menu">
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
    </ul>
    <div class="columns">
        <div class="inner">
            <div class="outer">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea a qui porro aspernatur repellat provident molestias eaque perferendis nostrum iste molestiae ipsa repellendus rem tempora amet maxime quisquam deserunt eligendi!
            </div>
        </div>
        <div class="inner">
            <div class="outer">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea a qui porro aspernatur repellat provident molestias eaque perferendis nostrum iste molestiae ipsa repellendus rem tempora amet maxime quisquam deserunt eligendi!
            </div>
        </div>
        <div class="inner">
            <div class="outer">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea a qui porro aspernatur repellat provident molestias eaque perferendis nostrum iste molestiae ipsa repellendus rem tempora amet maxime quisquam deserunt eligendi!
            </div>
        </div>
    </div>
    <div class="footer">
        <h2>This is footer</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo quae consequatur, dolores magni fuga tempora excepturi obcaecati quod iure quas soluta ex voluptate culpa voluptas...

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background: #bbb;
    font: 0.85em/1.2 Tahoma, sans-serif;
}

.wrapper {
    max-width: 1200px;
    min-width: 400px;
    margin: auto;
    padding: 20px;
}

.menu {
    display: table;
    margin: 50px auto;
    width: 100%;
}

.menu li {
    display: table-cell;
    padding: 10px 20px;
    text-align: center;
    border: 2px solid #fff;
    vertical-align: bottom;
}

.menu li:not(:last-child) {
    border-right: none;
}

.columns {
    margin-bottom: 50px;
}

.columns:after {
    content: '';
    height: 0;
    display: table;
    clear: both;
}

.inner {
    width: 33%;
}

.inner:nth-child(1) {
    float: left;
}

.inner:nth-child(2) {
    float: right;
}

.inner:nth-child(3) {
    margin: 0 33.5%;
}

.outer {
    border: 2px solid #fff;
    padding: 10px;
}

h2 {
    text-align: center;
}