JSFiddle - React, Tailwind, and code Playground

by spadez

HTML

<div id="header" class="fullheight center">
        <div id="nav">
<ul>
<li>Home</li>
<li>Price</li>
</ul>

</div>

        <span>Big message</span>
<span>Smaller message</span>
<a href="#" id="sign_up">Sign up free</a>
<span>Sub notes</span>
down arrow

    </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;
margin: 0;
padding: 0;
}

#header { }
#content{background-color: white;}

.fullheight{ height: 100%; }

.center{text-algin: center;}
span {display: block;}


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