JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://nextspace-limited.github.io/nextspace-web-bundle/dist/nextspace.js?v1"></script>

<div class="page">
    <div class="dialog">
        <div class="form">
            <div class="larger">
                Login
            </div>

            <div class="input-column">
                <div class="title">
                    Login / Email
                </div>
                <input id="NXT_USER" type="text" placeholder="name@company.com"/>
            </div>
            <div class="input-column">
                <div class="title">
                    Password
                </div>
                <input id="NXT_PASS" type="password" placeholder="*****"/>
            </div>
            
            <div class="terms-conditions">
                <span>
                    By using this service you agree to the following
                    <a target="_blank" href="https://www.nextspace.com/legal/terms-of-use">terms of use</a>
                </span>
            </div>
            
            <div id="EXAMPLE_RESULT_HANDLE">
            
            </div>
            
            <button id="LOGIN_BUTTON">
                Login
                <svg class="" width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 1.5L8.5 8.5L1.5 15.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
            </button>
        </div>

        <div class="branding">
            <div class="nextspace">
                <img src="https://template.api.nextspace.host/file/3e7af762-4283-49af-acfd-52aff9e94135.png"/>
            </div>
        </div>
    </div>
</div>

CSS

html {
    font-family: "Arial";
}

html, body {
    font-size: 12px;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.larger {
    margin-top: 60px;
    font-size: 2.3em;
    margin-bottom: 0.8em;
    color: #003A6D;
}

.input-column {
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
}

.input-column > .title {
    margin-bottom: 2px;
}

input[type="password"] {
    letter-spacing: 1px;
    font: large Verdana, sans-serif;
}

input[type="text"], input[type="password"] {
    border-radius: 0.375rem;
    border: 1px solid grey;
    color: black;
    background-color: white;
    padding: 0.5rem 0.75rem;
    outline: none;
    height: 38px;
}

button {
    cursor: pointer;
    border-radius: 0.375rem;
    padding: 6px 9px;
    transition: opacity 0.3s ease;
    width: 100px;
    width: min-content;
    height: min-content;
    white-space: nowrap;
    border: 1px solid #0072c3;
    color: white;
    background-color: #0072c3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

button:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

button > svg {
    margin-left: 5px;
    max-height: 15px;
    max-width: 15px;
}

.page {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-color: #ECEFF1;
}

.dialog {
    border-radius: 9px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    max-height: 700px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    box-shadow: 0px 18px 36px -4px rgba(98, 117, 127, 0.18);
    filter: drop-shadow(0px 0px 1px rgba(98, 117, 127, 0.12));
}

.dialog > .branding, .dialog > .form {
    display:...

JavaScript

BModels.ENVIRONMENT.PARAMS = {
    ...BModels.ENVIRONMENT.PARAMS,
    accountId: "your-account-id"
}

const displayResult = (text) => {
	const container = document.getElementById("EXAMPLE_RESULT_HANDLE");
    container.innerText = text;
    container.style.display = "block";
};

let loggingIn = false;
const doLogin = async () => {
	if (loggingIn) {
    	return;
    }
    loggingIn = true;
	try {
    	const userInput = document.getElementById("NXT_USER");
        const passInput = document.getElementById("NXT_PASS");
        const user = userInput.value;
        const pass = passInput.value;
        if (!user || !pass || !user.trim() || !pass.trim()) {
        	throw("Ensure all fields are filled out.");
        }
        
    	const data = await BModels.Session.Login({
        	accountId: BModels.ENVIRONMENT.PARAMS.accountId,
            username: user,
            password: pass
        });
        console.log("Logged in. Session: ", data.session);
        
        const ssid = data.session.ID;
        // Reset the environment to use the session.
        BModels.ENVIRONMENT.Reset({
            sessionId: ssid
        });
        displayResult("Logged in. See web console for more info.");
    }
    catch (e) {
    	console.error(e);
        displayResult("Failed to login. See web console for more info.");
    }
    loggingIn = false;
};

const button = document.getElementById("LOGIN_BUTTON");
button.onclick = () => {
	doLogin();
};