JSFiddle - React, Tailwind, and code Playground

by a_robson

HTML

<div id="area">
    <img id ="main-dirt" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQBaz5gkpoibGQfZ0-yHMHGoP4mGoawGRKKN_z6FK_v344NNxpr"></img>    
    <img id ="picture"...

CSS

h1 {
     background-color: purple;
     color: yellow;
     font-size: 100pt;
     text-align: center; 
}

#dirt { 
    height: 20%;
    weight: 20%;
}

CoffeeScript

dirt_url = "http://t0.gstatic.com/images?q=tbn:ANd9GcQBaz5gkpoibGQfZ0-yHMHGoP4mGoawGRKKN_z6FK_v344NNxpr"

getDirt = ->
    '<img id="dirt" src="' + dirt_url + '"></img>'

$ ->
    area = $("#area")
    img = $("#picture")
    pile = $("#main-dirt")
    title = $("h1")
    $(document).click ->
        if img.css("margin-left") < "400"
            img.animate
                "margin-left": "+=400",
                {
                    complete: ->
                        img.before( getDirt() )
                }
        else
            img.animate
                "margin-left": "-=400",
                {
                    complete: ->
                        $("#dirt").remove()
                        if pile.width() > 300
                            pile.animate
                                "height": "100%"
                                "width": "100%",
                                "slow"
                        else
                            pile.animate
                               "height": "+=30"
                               "width": "+=30"
                }