JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<form id="information-form">
    <fieldset>
        <legend>Information</legend>
        <div>
            <label for="name">Name:</label>
            <input id="name"/>
        </div>
        <div>
            <label for="address">Address:</label>
            <input id="address"/>
        </div>
        <button>Update</button>
        <button id="delete">Delete</button>
        <p id="admin-message">To delete this user, please contact an administrator.</p>
    </fieldset>
</form>
    
<button id="admin">Display as admin</button>
<button id="regular-user">Display as regular user</button>

CSS

#delete {
    display: none;
}
[data-admin="true"] #admin-message {
    display: none;
}
[data-admin="true"] #delete {
    display: inline-block;
}

label {
    display: inline-block;
    font-weight: bold;
    width: 30%;
}
p {
    font-style: italic;   
}
fieldset > div {
    line-height: 2.5em;
}
fieldset label {
    line-height: 1em;
}
form + button {
    margin-top: 3em;
}

JavaScript

var adminButton = document.querySelector( "#admin" ),
    regularButton = document.querySelector( "#regular-user" ),
    form = document.querySelector( "#information-form" );

adminButton.addEventListener( "click", function() {
    form.setAttribute( "data-admin", true );
});
regularButton.addEventListener( "click", function() {
    form.setAttribute( "data-admin", false );
});