JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<div class="container">
    <header class="header">
        <h1><span class="clr1">jared</span> <span class="clr2">barnett</span></h1>
    </header>
    <div class="body">
        <div class="body-panel panel1"></div>
        <div class="body-panel panel2"></div>
    </div>
</div>

CSS

html, body, .container {
    height: 100%;
    margin: 0;
    padding: 0;
}

.header {
    background-color: #0C1532;
    border-bottom: 1em solid #0D9D7C;
    height: 30%;
}

.header h1 {
    text-align: center;
    font-size: 4em;
    padding: 0.75em 0 0;
    margin: 0;
}

.clr1 {
    color: #EFE1BC;
}

.clr2 {
    color: #DB4337;
}

.body {
    position:relative;
    height: 65%;
    background-color: #0C1532;
}

.body-panel {
    position: absolute;
    height: 49%;
    width: 100%;
}

.panel1 {
    top: 0;
    background-color: #EFE1BC;
}

.panel2 {
    bottom: 0;
    background-color: #DB4337;
}