JSFiddle - React, Tailwind, and code Playground

by MAeSI

HTML

<input type="button" onclick="javascript:popup();" value="Login" />
<div id="box">
    <form method="post" action="#">
        <fieldset>
            <label for="user">user</label>
            <input id="user" name="user" type="text" value="" />
        </fieldset>
        <fieldset>
            <label for="passw">password</label>
            <input id="passw" name="passw" type="password" value="" />
        </fieldset>
        <div style="text-align: center;">
            <button class="btn" type="button">Accedi</button>
        </div>
    </form>
</div>

CSS

#box {
    display:none;
    width:260px;
    height:130px;
    border:1px solid gray;
    font-family:Arial, Helvetica, sans-serif;
}
form input {
    width:150px;
}
fieldset {
    border:none;
}
label {
    float:left;
    width:76px;
}

JavaScript

function popup() {
    var item = document.getElementById("box");
    if (item.style.display == "block") 
        item.style.display = "none";
    else 
        item.style.display = "block";
}