JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<a href="#" id="email-signup-link" class="img01"> 
<img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
</a>
<div id="email-signup" class="img01">
    <div id="inner" class="img01">adsfasdfasdfasfasdf</div>
</div>






<a href="#" id="email-signup-link" class="img02"> <img class="img02" src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg"/></a>

<div id="email-signup" class="img02">
    <div id="storytext">
         <h2>E-mail Notifications</h2>

        <input class="img02" 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;
}
#email-signup {
    display:none;
}
#story {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    background-color:black;
    z-index:1000;
}
#storytext {
    top:30px;
    left:30px;
    color: white!important;
    z-index:3000;
}
.img01, .img02, .img03, .img04, .img05 {
    width:200px;
    height:auto;
    position:absolute;
}
.img01 {
    top: 50px;
    left: 25px;
}
.img02 {
    top: 100px;
    right: 25px;
}
.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");
    $('#storytext').fadeIn("slow");
    $('#email-signup-link').css("z-index", "2000")
});
$(document).click(function () {
    $('#email-signup').fadeOut("slow");
    $('#story').fadeOut("slow");
    $('#storytext').fadeOut("slow");
});