JSFiddle - React, Tailwind, and code Playground

by Anderson Madeira

HTML

<div class="header">
    <div class="title">
         <h1>My Site</h1>

    </div>
    <div class="navbar">
        <ul>
            <li><a href="#">Home</a>

            </li>
            <li><a href="#">Projects</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
            <li><a href="#">About</a>

            </li>
        </ul>
    </div>
</div>
<div class="content">
     <h1>Lorem ipsum</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie purus vitae bibendum porta. Ut at rhoncus purus. Donec tempus tellus neque, et mattis justo placerat sit amet. Donec rhoncus sapien vitae tempor sagittis. Maecenas condimentum urna erat, non tincidunt odio consequat tristique. Duis dolor tellus, faucibus euismod dictum eget, sollicitudin quis nisl. Cras convallis risus ut consequat lacinia. Praesent vel velit eu felis scelerisque commodo nec quis sem. Vestibulum id diam et nunc imperdiet malesuada. Suspendisse porttitor, libero lobortis aliquam gravida, turpis arcu tincidunt lacus, at dignissim erat libero id ipsum. Curabitur ut interdum nisi, in molestie nisi.</p>
     <h1>Lorem ipsum</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie purus vitae bibendum porta. Ut at rhoncus purus. Donec tempus tellus neque, et mattis justo placerat sit amet. Donec rhoncus sapien vitae tempor sagittis. Maecenas condimentum urna erat, non tincidunt odio consequat tristique. Duis dolor tellus, faucibus euismod dictum eget, sollicitudin quis nisl. Cras convallis risus ut consequat lacinia. Praesent vel velit eu felis scelerisque commodo nec quis sem. Vestibulum id diam et nunc imperdiet malesuada. Suspendisse porttitor, libero lobortis aliquam gravida, turpis arcu tincidunt lacus, at dignissim erat libero id ipsum. Curabitur ut interdum nisi, in molestie nisi.</p>
     <h1>Lorem ipsum</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie purus vitae bibendum...

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.header {
    background-color: #999999;
    position: relative;
    width: 100%;
    min-width: 700px;
    /* tamanho mínimo igual ao content */
    height: 50px;
    top: 0px;
    left: 0px;
}
.title {
    background-color: #222;
    position: absolute;
    color: white;
    top: 0px;
    left: 0px;
    height: 50px;
    margin-left: 50px;
}
.title h1 {
    margin: 0px;
    padding: 5px;
}
.navbar {
    background-color: #666;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-right: 50px;
}
.navbar ul li {
    list-style-type: none;
    display: inline;
    margin: 0;
    font-size: 1.3em;
    padding: 5px;
}

.navbar ul:first-child {
    padding-left: 0px;
}

.navbar ul li a {
    padding: 14px 10px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 50px;
    text-decoration: none;
    color: #333;
    font: sans-serif;
}
.navbar ul li a:hover {
    color: black;
    background-color: blue;
}
.content {
    background-color: red;
    min-height: 100%;
    width: 700px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -1.5em;
    padding-top: 25px;
}
/* os dois devem ter o mesmo tamanho incluindo margens */
 .footer, .blank {
    height: 1.5em;
    background: black;
    color: white;
    text-align: center;
    margin-top: 20px;
    min-width: 700px;
    /* tamanho mínimo igual ao content */
}

.footer {
    padding-top: 10px;
    background-color: blue;
}