JSFiddle - React, Tailwind, and code Playground

by flynn_inc

HTML

<div style="border: solid 1px #ccc; padding: 30px 0 30px 30px; border-radius: 5px;
        width: 325px; margin: auto; display: table;">
  <table>
    <tr>
      <td valign="top">
        <label for="userName">Username:</label>
        <input type="text" id="username" name="username" required />
      </td>
    </tr>
    <tr>
      <td valign="top">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" minLength="8" required placeholder="8 characters minimum" />
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <td>
        <input type="submit" value="Login" />
      </td>
    </tr>
  </table>
</div>

CSS

@font-face {
  font-family: 'Fira Sans';
  src: local('FiraSans-Regular'), url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
}

legend {
  background-color: #000;
  color: #fff;
  padding: 3px 6px;
}

.output {
  font: 1rem 'Fira Sans', sans-serif;
}

label {
  display: inline-block;
  font-size: .9rem;
  width: 35%;
}

input[type="text"],
input[type="password"] {
  width: 60%;
}

input {
  margin: .4rem 0;
}