JSFiddle - React, Tailwind, and code Playground

by peteng

HTML

<div id="header" class="table">
    <div class="row top">
        <div class="cell">
            <ul>
                <li>Home</li>
                <li>Price</li>
            </ul>
        </div>
    </div>
    <div class="row middle">
        <div class="cell">
            <span>Big message</span>
            <span>Smaller message</span>
            <a href="#" id="sign_up">Sign up free</a>
            <span>Sub notes</span>
        </div>
    </div>
    <div class="row bottom">
        <div class="cell">
            down arrow
        </div>
    </div>
</div>
       
    <div id="content">
Hello           
    </div>

CSS

*{padding: 0px; margin: 0px;}

html,body {
    height:100%;
}

#header{
    background-color: #3B2F63;
    background-image: -webkit-radial-gradient(50% top, rgba(84,90,182,0.6) 0%, rgba(84,90,182,0) 75%),-webkit-radial-gradient(right top, #794aa2 0%, rgba(121,74,162,0) 57%);
    background-repeat: no-repeat;
    background-size: 100% 1000px;
    color: #c7c0de;
}

#content{background-color: white;}

.table { height: 100%; display:table; width:100%; }
.row { display:table-row; }
.cell { display:table-cell; text-align:center; vertical-align:top; }
.middle .cell { vertical-align:middle; height:100%;}

span {display: block;}
#sign_up {padding: 10px; background: white; border-radius: 3px;}