JSFiddle - React, Tailwind, and code Playground

by uttara

HTML

<body>
    <button>Toggle between hide() and show()</button>
    <div id="redcover">
        </br>Menu
        <ul class="menu">
            <li class="menuitem">one</li>
            <li class="menuitem">one</li>
            <li class="menuitem">one</li>
        </ul>
    </div>
    <div id="write">
        <img src="http://farm4.staticflickr.com/3138/2736347667_4b7b441219.jpg" width="100px" height="100px">
        <img src="http://www.konicaminolta.com/kids/endangered_animals/library/field/img/a-elephant_img01-l.jpg" width="100px" height="100px">
        </br>Monkey</br>
        <ul>
            <li>one</li>
            <li>one</li>
            <li>one</li>
        </ul>
    </div>
</body>

</html>

CSS

#redcover {
    position:absolute;
    left:9px;
    top:30px;
    color:white;
    text-align:center;
    width:200px;
    height:300px;
    background:url(http://dl.dropbox.com/u/55833938/blacktrans2.png);
    opacity:;
    z-index:1;
    display:none;
}
ul.menu {
    list-style-type:none;
    text-align:;
    color:purple;
}
li.menuitem {
    text-decoration:none;
    width:100px;
    border:1px solid white;
    border-collapse;
    collapse;
    border-radius:5px;
    margin:5px;
}
li.menuitem:hover {
    color:orange;
    border-color:red;
}
}
#write {
    position:absolute;
    left:9px;
    top:30px;
    z-index:-1;
}
#write.blrrrry {
    -webkit-filter: blur(5px) opacity(1.0);
}
*/

JavaScript

$(document).ready(function () {
    $("button").click(function () {
        $("#redcover").toggle();
        $("#write").toggleClass('blrrrry', 1000);

    });
});