JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<div id="loginbox">
    <div id="login-title">Login</div>
    <form action="." method="post" onsubmit="event.preventDefault();">
        <fieldset>
            <input type="text" name="u" id="login-u" />
            
            <input type="password" name="p" id="login-p" />
            <input type="submit" value="Auth" />

        </fieldset>
    </form>
</div>

CSS

fieldset { border: none; margin: 0; padding: 0; } 
body {     
    background-color: #181411;     
    color: #AAA;     
    font-family: verdana;     
    font-size: 14px;     
    padding: 0px; 
} 
#loginbox {     
    text-align: center;     
    width: 200px;     
    border: solid 2px #555;     
    border-radius: 12px;     
    height: 120px;     
    position: fixed;     
    top: 50%;     
    margin-top: -60px;     
    left: 50%;     
    margin-left: -100px;     
    background-color: #111118;     
    box-shadow: 0 0 75px #558; 
    text-align: center;
} 
#login-title {     
    background-color: #555;     
    color: #58F;     
    border-top-left-radius: 6px;     
    border-top-right-radius: 6px;     
    padding: 2px 0;     
    font-weight: bold;     
    font-size: 140%;     
    border-bottom: solid 2px #555;     
    margin-bottom: 4px;     
    text-shadow: 0px 1px 2px #111;
} 
#loginbox form, #loginbox form input, #loginbox form label { margin: 0 auto; } 
#loginbox input { display: block; }
#loginbox input[type="text"], #loginbox input[type="password"] {     
    border: solid 1px #558;     
    border-radius: 2px;     
    background-color: #222228;     
    color: #999;     
    padding: 2px;     
    width: 120px;     
    font-size: 80%;     
    margin: 3px auto; 
} 
#loginbox input[type="submit"] {     
    border: solid 2px #222228;     
    border-radius: 6px;     
    background-color: #558;     
    color: #000;     
    padding: 2px;       
    font-weight: bold;       
    margin: 6px auto; 
    width: 50px;
}