JSFiddle - React, Tailwind, and code Playground

by b00t

HTML

<div id="logincontainer"><input type="button" value="login" onclick="login('login')" /></div>

<script>
    function login (logtype) {
        var insertInput = function (value) {
			document.getElementById('logincontainer').insertBefore(
			document.createElement('input'),
			document.getElementsByTagName('input')[0]);
			var newButton = document.getElementsByTagName('input')[0];
			newButton.type = 'button';
			newButton.value = value;
			if (value === 'logout') {
				newButton.onclick = function () {login('logout');};
			}
			if (value === 'login') {
				newButton.onclick = function () {login('login');};
			}
			if (value === 'myprofile') {
				newButton.onclick = function () {window.location.href='http://jsfiddle.net/user/b00t/fiddles/';};
			}
		},
		deleteInput = function () {
			document.getElementById('logincontainer').removeChild(document.getElementById('logincontainer').lastChild);
		};
		if (logtype === 'login') {
			var logIn = confirm('Login?');
			if (logIn) {
                insertInput('myprofile');
				insertInput('logout');
				deleteInput();
			}
		}
		else if (logtype === 'logout') {
			var logOut = confirm('Logout?');
			if (logOut) {
				insertInput('login');
				deleteInput();
				deleteInput();
			}
		}
    }
</script>

CSS

input {
    float: right;
}
div {
    width: 250px;
    height: 100px;
    margin: 0 auto;
    background-color: #ccddff;
}