JSFiddle - React, Tailwind, and code Playground

HTML

<section id="contact">
	<div id="envelope">
		<div class="envelopeBack">&nbsp;</div>
		<div class="envelopeContents">
			<form method="POST">
				<h1>E-Mail:</h1>
				<p class="message"></p>
				<table>
					<tr>
						<th>
							<label for="email">Your e-mail:</label>
						</th>
						<td>
							<input type="text" name="email" id="email"/>
						</td>
						<td class="captcha" rowspan="3">
							<img id="captchaImg" src="" alt="CAPTCHA Image"/><br/>
						</td>
					</tr>
					<tr>
						<th>
							<label for="subject">Subject:</label>
						</th>
						<td>
							<input type="text" name="subject" id="subject"/>
						</td>
					</tr>
					<tr>
						<th>
							<label for="captcha">Captcha:</label>
						</th>
						<td>
							<input type="text" name="captcha" id="captcha"/>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<textarea name="emailContents"></textarea>
						</td>
					</tr>
				</table>
				<button id="sendMail" type="submit">
					<span id="icoSendMail">Send</span>
				</button>
			</form>
		</div>
		<div class="envelopeFront">&nbsp;</div>
	</div>
</section>

CSS

#contact {
	height: 100%;
	min-height: 900px;

	position: relative;
	text-align: center;
	background-color: #242424;
	box-shadow: 0px -5px 50px #000000;
}

#contact #envelope {
	width: 625px;
	position: absolute;
	left: 50%;
	margin-left: -312px;
	bottom: 800px;
}

#contact .envelopeBack{
    position: absolute;
	width: 625px;
	height: 525px;
	overflow: hidden;
	background-image: url("http://pbeckers.be/img/envelopeBack.png");
	background-position: 0px 0px;
	background-repeat: no-repeat;
}

#contact .envelopeFront{
    position: absolute;
	width: 625px;
	height: 525px;
	overflow: hidden;
    background-color: rgba(255, 0, 0, 0.1);
	background-image: url("http://pbeckers.be/img/envelopeFront.png");
	background-position: 0px 0px;
	background-repeat: no-repeat;
	pointer-events: none;
}

#contact .envelopeContents {
    position: absolute;
	margin-left: 20px;
	background-color: #FFFFFF;
	width: 540px;
	height: 250px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6), inset 0px 0px 5px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	margin-top: 90px;
	
	padding-top: 0px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
}

JavaScript

$(document).ready(function() {
   	// Envelope:
	var fnSlideEnvelope = function() {
		var envObj = $("#envelope");
		var envFront = $("#envelope .envelopeFront");
		var envBack = $("#envelope .envelopeBack");
		
		if ((envObj.offset().top + envFront.height()) < ($(window).scrollTop() + $(window).height())) {
			$("#envelope .envelopeContents").css("height", ($(window).scrollTop() + $(window).height()) - (envObj.offset().top + envFront.height()) + 250);
			if (envFront.css("position") == "absolute") {
				envFront.css("bottom", "0px");
				envBack.css("bottom", "0px");
				envFront.css("position", "fixed");
				envBack.css("position", "fixed");
			}		
		} else if (envFront.css("position") == "fixed") {
			envFront.css("position", "absolute");
			envBack.css("position", "absolute");
			envFront.css("bottom", "");
			envBack.css("bottom", "");
		}
	};
	
	// Bind to scroll and resize:
	$(window).scroll(fnSlideEnvelope);
	$(window).resize(fnSlideEnvelope); 
});