JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="background_logo">
			<img src="http://drivesmartbc.ca/sites/default/files/images/smiley%20face.thumbnail.jpg">
		</div>
		<div id="logo">
			<img src="https://lh4.googleusercontent.com/-b86bjfIcDMk/TXpUmwBK_FI/AAAAAAAAARY/ws-ypr2P39I/s200/9+smiley+face.jpg">
		</div>
		<div id="signup">
			<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
			<script type="text/javascript" src="js/form-validation.js"></script>
			<form id="emailForm" action='#' method="post">
				<input name="email"  id="email" type="text" />
				<input type="button" value="Submit" name="submit" id="submit" />
			</form>
			<p id="success" class="success">Thanks - we'll keep in touch!</p>
			<p id="error" class="warning">There was an error</p>
		</div>
	</body>


</html>

CSS

#logo {
	width: 100%;
	text-align: center;
}
#signup {
	width: 100%;
	text-align: center;
}
input {
	border: 2px solid rgb(49, 175, 0); 
	-webkit-box-shadow: inset 0 0 8px  rgba(0,0,0,0.1),    0 0 16px rgba(0,0,0,0.1); 
	-moz-box-shadow: 
	  inset 0 0 8px  rgba(0,0,0,0.1),
			0 0 16px rgba(0,0,0,0.1); 
	box-shadow: inset 0 0 8px  rgba(0,0,0,0.1),     0 0 16px rgba(0,0,0,0.1);
			padding: 15px;
	background: rgba(255,255,255,0.5);
	margin: 0 0 10px 0;
}
p {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
#success {
}
#background_logo{
	position: absolute;
}

JavaScript

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}
fade(document.getElementById('background_logo'));