JSFiddle - React, Tailwind, and code Playground

by KarinaMcG

HTML

<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').click(function() {
 
      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 });
      
      $('#overflow').click(function() {

        $(this).fadeOut('slow') 
        $('.newsletter').stop().animate({ left: '-390px' }, 650);

      });
        
    });
    
    $(window).resize(function() {
        
      var wWth = $(window).innerWidth(),
          wHgt = $(window).innerHeight();

      $('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt });
        
    });

});