JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div class="grid-container">
      <div class="square"></div>
      <fieldset class="contain">
        <legend>Login</legend>
        <label class="grid-items">Username</label>
        <input type="text" class="ans" id="ans-user" name="ans-user" />
        <label class="grid-items">Password</label>
        <input type="text" class="ans" id="ans-pass" name="ans-pass" />
        <button class="button login">login</button>
      </fieldset>
    </div>

CSS

html,
body {
  height: 100%;
  font: 30px "2005_iannnnnCPU";
}

body {
  margin: 0;
  padding: 0;
  background: #000;
}

.grid-container {
  display: grid;
  height: 100%;
  color: #fff;
  justify-items: center;
  align-items: center;
}

.square {
  height: 50px;
  width: 50px;
  background-color: #fff;
}

.contain {
  display: grid;
  padding: 15px;
  border: 3px solid #fff;
  color: #fff;
}

.grid-items {
  margin: 1% 1%;
}

.ans {
  margin: 1% 1%;
  font: 20px "2005_iannnnnCPU";
  letter-spacing: 2px;
}

input[type=text] {
  background-color: none;
  background: transparent;
  border: 2px solid #555;
  color: #fff;
}

input[type=text]:focus {
  border: 2px solid #fff;
}

textarea:focus,
input:focus {
  outline: none;
}

.button {
  border: none;
  color: white;
  padding: 2% 2%;
  margin: 6% 6%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.login {
  background-color: #000;
  font: 30px "2005_iannnnnCPU";
  color: #fff;
  border: 2px solid #fff;
  width: 50%;
  -ms-transform: translateX(40%);
  transform: translateX(40%);
}

.login:focus {
  background-color: white;
  color: black;
  font-weight: bold;
}