JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Login</title>
    <link href="index.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>

  <body>
    <div class="nav">
      <img src="../footer-logo.png" class="logo">
      <a href="#" class="link-first">Home</a>
      <a href="#" class="link">Community</a>
      <a href="#" class="link-reg">Register</a>
    </div>
    <div class="wrapper">
      <div class="header">
        Hello Again,
      </div>
      <div class="sub-header">
        Please Login
      </div>

      <div class="login-wrapper">
        <div class="un-wrapper">
          <input type="text" id="un" placeholder="Username">
          <i style="margin-left: auto;" class="material-icons">account_circle</i>
        </div>
        <div class="pw-wrapper">
          <input type="password" id="pw" placeholder="Password">
          <i style="margin-left: auto;" class="material-icons">lock</i>
        </div>
        <div class="submit">
          <div class="s-text">
            SUBMIT
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

CSS

* {
  padding: 0;
  margin: 0;
}

html {
  background-image: url("backgnd.jpg");
  background-size: cover;
  font-family: 'Roboto', sans-serif;
}

.logo {
  width: 10%;
  display: inline-flex;
}

.nav {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.05);
  margin-bottom: 10%;
}

.link-first {
  color: white;
  margin-left: auto;
  margin-right: 3%;
  text-decoration: none;
  transition: color .2s ease-in;
}

.link-first:hover {
  color: rgba(255, 255, 255, 0.7);
}

.link {
  color: white;
  margin-right: 3%;
  text-decoration: none;
  transition: color .2s ease-in;
}

.link:hover {
  color: rgba(255, 255, 255, 0.7);
}

.link-reg {
  color: black;
  display: inline-block;
  margin-right: 3%;
  text-decoration: none;
  transition: all .2s ease-in;
  background-color: white;
  padding: 1% 2% 1% 2%;
  border-radius: 15em;
}

.link-reg:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.wrapper {
  background-color: white;
  text-align: center;
  margin-left: 35%;
  margin-right: 35%;
  border-radius: 1em;
  padding-bottom: 3%;
}

.header {
  font-size: 200%;
  font-weight: 300;
  padding-top: 3%;
}

.sub-header {
  font-weight: 300;
  padding-bottom: 10%;
  margin-top: 1%;
}

#un {
  border: 0 none;
  font-size: 120%;
  font-weight: 300;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.005);
}

.un-wrapper {
  padding: 3% 5% 3% 5%;
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  margin-bottom: 5%;
  border: 0 solid;
}

#pw {
  border: 0 none;
  font-size: 120%;
  font-weight: 300;
  display: inline-flex;
  background-color: rgba(0, 0, 0, 0.005);
}

.pw-wrapper {
  padding: 3% 5% 3% 5%;
  display: flex;
  align-items: center;
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  border: 0 solid;
}

.submit {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.8);
 ...