JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<a href="#" id="email-signup-link" class="img01"> <img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="email-signup">
    <div id="inner">
        <h2>E-mail Notifications</h2>
        <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
        <a href="#">Sign Up</a>
    </div>
</div>

<a href="#" id="email-signup-link" class="img02"> <img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg"/></a>
<div id="email-signup">
    <div id="inner">
        <h2>E-mail Notifications</h2>
        <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
        <a href="#">Sign Up</a>
    </div>
</div>

<a href="#" id="email-signup-link" class="img01"> <img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="email-signup">
    <div id="inner">
        <h2>E-mail Notifications</h2>
        <input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
        <a href="#">Sign Up</a>
    </div>
</div>





<div id="story"></div>

CSS

html,body { width:100%; height:100%; }
#email-signup-link, #email-signup { position:absolute; top: 100px; left:100px; }
#email-signup { display:none; }
#story { display:none; width:100%; height:100%; position:fixed; background-color:black; z-index:1000; }
.img01 { top: 50px; right: 50px; }
.img02 { top: 100px; right: 100px; }
.img03 { top: 150px; right: 150px; }
.img04 { top: 200px; right: 200px; }
.img05 { top: 250px; right: 250px; }
.img06 { top: 300px; right: 200px; }

JavaScript

$('#email-signup').click(function(e){
    e.stopPropagation();
});
$("#email-signup-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#email-signup').fadeIn( "slow" );
    $('#story').fadeIn( "slow" );
    $('#email-signup-link').css("z-index", "2000")
});
$(document).click(function() {
    $('#email-signup').fadeOut( "slow" );
    $('#story').fadeOut( "slow" );
});