JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<div id="text">Visible! Click again to make me disappear.</div>
<a href="#" onclick="toggleDiv()">click</a>

<br /><br />

<div id="box"></div>
<a href="#" onclick="colorDiv()">click</a>

CSS

#text {
    position: relative;
    opacity: 0;
}

#box {
    position: relative;
    width: 50px;
    height: 50px;
    background: red;
    -webkit-transition: background 2s;
            transition: background 2s;
}

JavaScript

<!-- Show and hide text -->

function toggleDiv() {
    "use strict";
    var x = document.getElementById('text');
    if (x.style.opacity === "1") {
        x.style.opacity = "0";
    } else {
        x.style.opacity = "1";
    }
}

<!-- Change background -->

function colorDiv() {
    "use strict";
    document.getElementById('box').style.background ='blue';
}

<!-- Active link -->