JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<div id="newsletter_anmeldung">
  <div id="newsletter_taste">
    <a href="#"></a>
  </div>
  <div id="newsletter_link">
    <h1>Newsletteranmeldung</h1>
    <form id='newsletter' method='post' action='fusszeile/newsletter-anmeldung/'>
              <dl>
                <dd>
                  <input name="FE[tt_address][gender]" type="radio" value="m" id="herr" />
                  <label for="herr">Herr</label> 
                  <input name="FE[tt_address][gender]" type="radio" value="f" id="frau" />
                  <label for="frau">Frau</label>
                </dd>
                <dd>
                  <input id='sender_mail' type="text" name="FE[tt_address][email]" value='E-Mail' />
                </dd>
                <dd>
                  <input id='sender_vorname' type="text" name="FE[tt_address][first_name]" value='Vorname' />
                </dd>
                <dd>
                  <input id='sender_name' type="text" name="FE[tt_address][last_name]" value='Nachname' />
                  <input type="hidden" name="FE[tt_address][module_sys_dmail_html]" value="1" />
                </dd>
                <dd>
                  <input type='submit' class='absende_button' value='Anmelden' />
                </dd>
                <dd>
                  <input type='hidden' name='Betreff' value='Newsletteranmeldung' />
                  <input type='hidden' name='Erfolgreiche Newsletteranmeldung' value='1' />
                </dd>
              </dl>
    </form>
  </div>
</div>

CSS

#newsletter_taste {
background-color: white;
width: 41px;
height: 40px;
float: right;
background:url(http://www.ritsch.at/ritsch_typo/fileadmin/templates/images/newsletter_icon.png)
}
#newsletter_anmeldung {
display: block;
float: left;
height: auto;
padding: 0;
position: fixed;
left: -306px;
top: 90px;
width: 347px;
z-index: 1002;
}
#newsletter_link {
background-color: white;
text-align: left;
width: 306px;
height: 210px;
}

JavaScript

$(function(){

$('#newsletter_taste').toggle(function() {
  $('#newsletter_anmeldung').stop().animate({  
    left: 0  
  }, 'medium');  
}, function() {  
  $('#newsletter_anmeldung').stop().animate({
    left: -$('#newsletter_anmeldung').width()+41
  }, 'medium');
});  

});