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 = 'nickbox-container'>
    <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 {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}
#nickbox {
  border: 1px solid white;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
}

.nickbox-container{
    display: flex;
    justify-content: center;

}