JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>
<div class="container">
    <img src="https://dwstroy.ru/lessons/les3373/demo/img/men.png">
    <form>
        <div class="dws-input">
            <input type="text" name="username" placeholder="Введите логин">
        </div>
        <div class="dws-input">
            <input type="password" name="password" placeholder="Введите пароль">
        </div>
        <input class="dws-submit" type="submit" name="submit" value="ВОЙТИ"><br />
        <a href="#">Восстановить пароль</a>
    </form>
    <div class="dws-social">
        <i class="fa fa-vk" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-google-plus-official" aria-hidden="true"></i>
        <i class="fa fa-odnoklassniki" aria-hidden="true"></i>
    </div>
</div>
</body>

CSS

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css');


body{
 background-image: url("https://dwstroy.ru/lessons/les3373/demo//img/bg.png");
}
a{
  color: #fff;
 }
a:hover{
 text-decoration: none;
}
.container{
 width:450px;
 background-color: rgba(24, 33, 52, 0.7);
 margin: 100px auto 0 auto;
 text-align: center;
 box-shadow: 0 -5px 0 #3adbfd;
 padding-bottom: 20px;
}
.container img{
 width:120px;
 height:120px;
 margin: -60px 0 30px 0;
 border: 5px solid #1a394f;
 border-radius: 50%;
 box-shadow: 0 -5px 0 #3adbfd;
}

input[type="text"],input[type="password"]{
 width: 300px;
 height:50px;
 font-size: 18px;
 margin-bottom: 25px;
 border-radius: 4px;
 padding-left: 40px;
}
.dws-input input:hover{
 box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35);
}
.dws-submit {
 padding: 13px 30px;
 margin: 5px 0 20px 0;
 font-size: 15px;
 color: #fff;
 background-color: #2ca8c6;
 border: none;
 border-bottom: 4px solid #6ee9fd;
 cursor: pointer;
}
.dws-submit:hover{
 transition: all 0.5s;
 background: #fff;
 color: #2c536c;
}

.dws-input::before{
 font-family: "FontAwesome";
 content: "\f007";
 position: absolute;
 font-size: 30px;
 padding: 10px 0 0 7px;
 color: #2c536c;
}
.dws-input:nth-child(2)::before{
content: "\f023";
}
.dws-input:hover::before{
 color: #319ebc;
 transition: all 0.3s;
}
.dws-social i{
 color: #fff;
 font-size: 20px;
 width: 20px;
 padding: 10px;
}
.dws-social i:hover{
 background-color: #fff;
 color: #1a394f;
 border-radius: 5px;
 cursor: pointer;
}