JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<html>
    <head>
    </head>
    
    <body>
        <div id="console">
            <h2>Console</h2>
        </div>
        <div id="content">
            <div id="banks">
                Banks are financial institutions that have lots of money
            </div>
            <div id="schools">
                Schools are places where humans go to learn
            </div>
            <p class="hider" for="banks">Hide the banks!</p>
            <p class="hider" for="schools">Hide the schools!</p>
        </div>
    </body>
</html

CSS

.hider {
    color: green;
    margin: 15px;
}

div {
    border: 1px solid black;
    padding: 15px;
}

#console {
    background: #DDF;
}

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

JavaScript

$(".hider").click(function(e) {
    var id = $(this).attr("for");
    $("#" + id).hide("slow");
    log("Hiding #" + id);
});

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