JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Форма входа</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<h1>Sign in</h1>
			<div class="header-social">
				<a href="#"><img src="img/google.png"  alt=""></a>
			</div>
			<div class="header-social">
				<a href="#"><img src="img/twitter.png" alt=""></a>
			</div>
			<div class="header-social">
				<a href="#"><img src="img/facebook.png" alt=""></a>
			</div>
		</div>
		<div class="form">
			<div class="form-block">
				<form>
				
				<input type="text" placeholder="E-mail Address">
					<input type="text" placeholder="Password">
					<button type="submit">Login into Your Account</button>
				</form>
			</div>
		</div>
		<div class="footer">
<h3>New Here? <a href="#">Sign Up</a></h3>
		</div>
	</div>
</body>
</html>

CSS

* {
	padding:0;
	margin:0;
}
body {
	background-color:#f2f2f2;
}
.container {
	margin:0 auto;
	margin-top:100px;
	width:420px;
	height:440px;
	border:1px solid #d7d7d7;
	border-radius:5px;
	background:#fff;
}
.header {
	margin:0;
	padding:0;
	height:60px;
	background:url('../img/bg.png') no-repeat;
}
.header h1 {
	color:#fff;
	font-family: 'Open Sans', sans-serif;
	font-size:22px;
	margin:0;
	padding:15px 0px 0px 30px;
	float:left;
}
.header-social {
	margin:0;
	padding:0;
	width:69px;
	height:60px;
	border-left:1px solid #3f5f95;
	float:right;
	background:none;
}
.header-social a {
	margin:0;
	display:block;
  text-align: center;
	padding:20px 0px 0px;
}
.form {
	height:320px;
	background:#fff;
}
.form-block {
	padding:0;
	padding-top:30px;
	margin-left:15px;
}
.form-block input[type="text"] {
	margin-top:20px;
	font-family: 'Open Sans', sans-serif;
	font-size:18px;
	color: #a7a6a6;
	width: 358px;
	padding: 15px;
	border: 1px solid #dfdfdf;
	background:#f9f9f9;
	border-radius: 5px;
	outline: none;
}
.form-block input[type="text"]:first-child {
	background:url(img/locked.png) no-repeat right center #f9f9f9;
}

.form-block input[type="text"]::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;color:#a7a6a6;}
.form-block input[type="text"]::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;color:#a7a6a6;}
.form-block input[type="text"]:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;color:#a7a6a6;}
.form-block input[type="text"]:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;color:#a7a6a6;}
.form-block input[type="text"]:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;color:#a7a6a6;}
.form-block input[type="text"]:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;color:#a7a6a6;}
.form-block input[type="text"]:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s...