JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>DE Newsletter Sign Up!</title>
<div class="newsletter">
	<div id="newslettertext1">
		Newsletter bestellen<br>
		<br>
		Lassen Sie sich per Newsletter &#252;ber Neuheiten und <br>
		Aktionen von Tempur informieren. Jetzt anmelden
	</div>
	<div id="signup">
		<form id="leftnewsletter" action="" method="get">
		<input type="email" name="email" id="emailsignup" placeholder="E-MAIL ADDRESS" style="margin-left:76px; margin-top:16px; width:187px;">
		<input type="submit" name="signupbtn" id="signupbtn" value="SIGN UP" class="signupbutton">
	</form>
	</div>
	<div id="newslettertext2">
		*Sie k&#246;nnen jederzeit Ihre Einwilligung zum Erhalt des<br>
Newsletters zur&#252;ckziehen und sich abmelden.
	</div>

</div>

CSS

body
{
	font-family: Arial;
}

.newsletter
{
	background-color:#f94798;
	position: fixed;
    top: 200px;
    left: -390px;
    width: 450px;
    height: 200px;
    z-index: 9999;
    cursor: pointer;
}

#newslettertext1
{
	font-size: 11px;
	padding-top:40px;
	padding-left:75px;
	font-weight: bold;
	color:#164e82;
}

#newslettertext2
{
	font-size:10px;
	color:#eaeaea;
	margin-left:76px;
	margin-top:7px;
}

#overflow {
    background-color: #fdf291;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

.text {
    display: block;
    width: 180px;
    margin: 80px 0 0 196px;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
    color: #ffffff;
    cursor: pointer;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.signupbutton
{
	background-color: #164e82;
	color:#ffffff;
	border-radius: 5px;
    cursor: pointer;
}

JavaScript

$(function () {
    $('.newsletter').bind('click.open', open)
    $(window).resize(function () {
        var wWth = $(window).innerWidth(),
            wHgt = $(window).innerHeight();
        $('#overflow').fadeIn('slow').css({
            width: wWth,
            height: wHgt
        });
    });
});

function open() {
    var overflow = $('<div id="overflow"><div>');
    $(this).stop().animate({
        left: '-35'
    }, 650);
    if ($('#overflow').length < 1) {
        $('body').append(overflow);
    }
    var wWth = $(window).innerWidth(),
        wHgt = $(window).innerHeight();
    $('#overflow').fadeIn('slow').css({
        width: wWth,
        height: wHgt
    });
    $('.newsletter').unbind('click.open').bind('click.close', close)
}

function close(e) {
    if ($(e.target).is('input')) return;
    $('#overflow').fadeOut('slow')
    $('.newsletter').stop().animate({
        left: '-390px'
    }, 650);
    $('.newsletter').unbind('click.close').bind('click.open', open)
}