JSFiddle - React, Tailwind, and code Playground

by maysamsh

HTML

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

</div>
<div class="className">
<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>

    <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;}

.className{
	width:270px;
	height:150px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-75px 0 0 -135px;
    background-color:red;
}

JavaScript

$(document).ready(function(){
						   
 $(window).resize(function(){

  $('.className').css({
   position:'absolute',
   left: ($(window).width() 
     - $('.className').outerWidth())/2,
   top: ($(window).height() 
     - $('.className').outerHeight())/2
  });
		
 });
 
 // To initially run the function:
 $(window).resize();

});