JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<html>
    <head>
    </head>
    
    <body>
        <div id="console">
            <h2>Console</h2>
        </div>
        <div id="menu">
            <a href="http://www.google.com">Google</a>
            <a href="http://www.stackoverflow.com">Stack Overflow</a>
            <a href="https://www.github.com">github</a>
        </div>
    </body>
</html

CSS

#menu {
    position: absolute;
    width: 0%;
    right: 0px;
    top: 60px;
    background: black;
}

#menu a {
    color: white;
}

div {
    border: 1px solid black;
}

#console {
    background: #DDF;
}

#console h2 {
    font-size: 1.5em;
}

JavaScript

$(function() {
    log("Hello World");
    $("#menu").animate({"width":"80%"},10000);
});

function log(msg) {
    $("#console").append("<pre>" + msg + "</pre");
}