JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id='cover'>
<div id='page'>
<div id='topBar'></div>
<div id='promoIMG'>
</div>
<div id='contentArea'>
</div>
</div>
<div id='container'>
</div>
<div class='leftcurtain'><img src='http://4.bp.blogspot.com/-sr-CvvMQTug/T_Um5qZeKjI/AAAAAAAAAg4/ktZkaQ7lRVQ/s1600/frontcurtain.jpg'/></div>
<div class='rightcurtain'><img src='http://4.bp.blogspot.com/-sr-CvvMQTug/T_Um5qZeKjI/AAAAAAAAAg4/ktZkaQ7lRVQ/s1600/frontcurtain.jpg'/></div>
<a class='rope' href='#'>
<img src='http://2.bp.blogspot.com/-C5rCGOen7tM/T_UnRaa9dUI/AAAAAAAAAhE/t1Zgr7b9V20/s1600/rope.png'/>
</a>
<div class='slidedown' id='holder'>
<img id='balloon1' src='http://2.bp.blogspot.com/-97GfAiuxAB0/T_UnmRh9hUI/AAAAAAAAAhQ/uLfFmnJVJ8c/s1600/balloon_png.png' style='position:absolute;top:5px;float:left;'/>
<img id='balloon2' src='http://1.bp.blogspot.com/-Mz5B3qZ7HzA/T_UnxzAGd1I/AAAAAAAAAhc/on8AW2az9gk/s1600/balloon_pngright.png' style='position:top;top:5px;float:right;'/>
    
<div class='divextra'>
<p> 
Happy birthday to you..<br/>
many many happy returns of the day.<br/>
    Your birthday was God&#8217;s way of sending me a gift.<br/><br/>
    
    <p class='author'>
        Made with pure love!<br/>
        it was designed for my dear one! :)<br/>

        it matters where,when and how, you use your designing skills! :)<br/>
    Follw Me on twitter, <a href='http://twitter.com/aslamc1990'>http://twitter.com/aslamc1990</a> .<br/> 
        dont forget to leave your footprints here if you like this :),Please let me know if there is something you want to share about this!
    </p>
    <p class='tweet'>Follw Me on twitter, <a href="http://twitter.com/aslamc1990">http://twitter.com/aslamc1990</a> .</p>
</div>
<div id='reflexcontainer'>
<center>
<a href='#top' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target=''>
<img alt='Happy Birthday' class='reflex idistance4 iheight iopacity50 iborder3 icolorE42217 itiltright ' height='220'...

CSS

/*basic reset goes here*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none} a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}a { color: #6d84b4; text-decoration: none; }
/*basic reset ends here*/

html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
body {
    height:100%;
    width:100%
    overflow:hidden;
    margin:0;
    padding:0;
    background-color: #000;
    background-image: url(http://2.bp.blogspot.com/-20_27lFdQtc/T_UmPpGkACI/AAAAAAAAAgI/jaHE8p1jSVY/s1600/snowh.png;), url(http://2.bp.blogspot.com/-oHyKRgrd6Vg/T_Ul8vMk5EI/AAAAAAAAAfw/weuA-gwox6o/s1600/snow3q.png;), url(http://4.bp.blogspot.com/-EUuTYWyKsd0/T_Umf_YdY_I/AAAAAAAAAgg/MTj4kocoS0A/s1600/snow2l.png;);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}


  
#splashScreen img{
    margin:0 auto;
}

#splashScreen{
   ...

JavaScript

$(document).ready(function(){
        
    $('#promoIMG').splashScreen({
        textLayers : [
            'http://4.bp.blogspot.com/-QoyMlthNnuE/T_UqCiU-dkI/AAAAAAAAAik/OHXxKeI84zI/s1600/what_i_have_intro.png',
            'http://1.bp.blogspot.com/-9_aSAyE_cE4/T_UqQYS4i-I/AAAAAAAAAiw/0-WbZlOLxa8/s1600/birthdaywish1.jpg',
            'http://2.bp.blogspot.com/-2FP8TgazzOw/T_UqZaTxiXI/AAAAAAAAAi8/fAdNYP2kScw/s1600/birthdaywish2.jpg'
        ]
    });
    
});


(function($){
    
    $.fn.splashScreen = function(settings){
        
        // Providing default options:
        
        settings = $.extend({
            textLayers        : [],
            textShowTime    : 1500,
            textTopOffset    : 80
        },settings);
        
        var promoIMG = this;

        // Creating the splashScreen div.
        // The rest of the styling is in splashscreen.css
        
        var splashScreen = $('<div>',{
            id    : 'splashScreen',
            css:{
                backgroundImage        : promoIMG.css('backgroundImage'),
                backgroundPosition    : 'center '+promoIMG.offset().top+'px',
                height                : $(document).height()
            }
        });
        
        $('body').append(splashScreen);
        
        splashScreen.click(function(){
            splashScreen.fadeOut('slow');
        });
        
        // Binding a custom event for changing the current visible text according 
        // to the contents of the textLayers array (passed as a parameter)
        
        splashScreen.bind('changeText',function(e,newID){
            
            // If the image that we want to show is
            // within the boundaries of the array:
            
            if(settings.textLayers[newID]){
                showText(newID);
            }
            else {
                splashScreen.click();
            }
        });    
    
        splashScreen.trigger('changeText',0);
    
        // Extracting the...