JSFiddle - React, Tailwind, and code Playground

HTML

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div class="nickcontainer">
 
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
   </div>
</div>

CSS

body {
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}
#nickbox {
 
  padding: 5px;
  background-color: #ffffff00;
      display: table-cell;
    vertical-align: middle;
}
.nickcontainer{    display: table;
    height: 82vh;;}