JSFiddle - React, Tailwind, and code Playground

HTML

<title>Adeventist Youth's Empowerment</title>

</head>
<body>
<header>This is my header sample with opacity 0.5</header>
<p>&nbsp;</p>
<div id="apDiv1">
<div align="center" class="apDiv1">
<h1 align="center"><cite>"Welcome to the Adventist Youth's Empowerment.  At this       website you can speak about your problems with others and get encouragement from seventh day adventist youth's who have had the same problems as you. This is a community that does not judge you and all information is kept confidential and only to the community of trusted members. If you are not a seventh day adventist then this website is still for you, All are welcomed!!!!     -Shadowcoder </cite></h1>
</div>    
<form id="form" method="get" action="Main.html">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<input type="submit" value="Escape The World" class="button">
</p>
</form>                  
</body>

CSS

body {
background-image:url(Images/background%20image1.jpg);
   background-repeat:no-repeat;
   background-size:100%;
   background-position:center top;  
}

#apDiv1 {
position: fixed;
left: 279px;
top: 100px;
width: 817px;
height: 390px;
}


#apDiv1 .apDiv1 h1 cite {
font-family: Georgia, Times New Roman, Times, serif;

}

#apDiv1 {
background:#FFF;
/*opacity: 0.5;*/
border-radius: 20px;
}

#form {
width: 20em; margin: auto;
}

.button {
display: marker;
background-position:center;
width: 9em;
height: 1em;
border:thin;
border-radius: 20px;
padding: 0px;
text-align: center;
font-size: 2em;
line-height: 1em;
color: #FFF;
background-color: #0C0;

}

.button:hover{
color: #000;
background-color: #0C0;

}

header {
width: 100%;
background-image:url(Images/header.gif);
height: 70px;
opacity: 0.5;
}
* {
margin: 0;
padding: 0;
}