JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet">
  <link rel="stylesheet" href="css/HTSC.css">
  <title>Aunt</title>
</head>
<body>
  <div class="block">
    <div class="blockImg">
    <img src="http://www.coopas.com.ar/images/productores/login.png" alt="test" class="blockImg__img">
    </div>
      <form class="net" action="index.html" method="post">
        <input class="net__input" type="text" name="login" placeholder="Login">
        <input class="net__input" type="email" name="email" placeholder="Email@bk.ru">
        <input class="net__input" type="password" name="pass" placeholder="Введите ваш пароль">
        <input class="net__input" type="password" name="pass2" placeholder="Потвердите ваш пароль">
        <button class="net__button">Login</button>
      </form>
  </div>
</body>
</html>

CSS

*{padding: 0;margin: 0;}
body{background-color: #3b4148;}
input, button{outline: none;  font-family: 'Merriweather Sans', sans-serif; color: rgb(126, 126, 126);}

.block{
  width: 420px;
  height: 430px;
  margin: 0 auto;
  margin-top: 170px;
  text-align: center;
  padding: 10px;
  background-color: #3b4148;
  box-shadow: 1px 3px 10px 3px rgba(0,0,0,0.75);
}

.blockImg{
  margin-bottom: 5px;
}

.blockImg__img{
  height: 160px;
}

 .net__input{
  width: 350px;
  height: 25px;
  margin: 8px;
  padding-left: 10px;
  font-size: 15px;
  border-radius: 5px;
  border: 1px solid rgb(9, 9, 9);
  background-color: #3b4148;
}

.net__button{
  width: 250px;
  height: 50px;
  margin-top: 20px;
  font-size: 20px;
  border: 2px solid rgb(70, 159, 182);
  background-color: transparent;
}

.net__input:focus{
  border: 1px solid rgb(70, 159, 182);
}