<div class="form">
	<h2>Login</h2>
	<div class="form-content">
		<div class="form-box">
			<label>Username</label>
			<input type="text" name="" placeholder="example@mail.com">
		</div>
		<div class="form-box">
			<label>Password</label>
			<input type="password" name="" placeholder="••••••••">
		</div>
		<div class="form-box">
			<input type="submit" name="submit" value="Sign In">
		</div>
	</div>
	<p class="form-forget">Forget password? <a href="#">Click Here...</a></p>
</div>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');

*{
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	margin: 0;
	padding: 0;
}

body{
	align-items: center;
	background: #2A2A2A;
	display: flex;
	justify-content: center;
	min-height: 100vh;
}

.form{
	background: #2A2A2A;
	border-radius: 10px;
	box-shadow: -5px -5px 10px rgba(255, 255, 255, 0.2), 5px 5px 15px rgba(0, 0, 0, 0.7);
	padding: 40px 40px 60px;
	position: relative;
	text-align: center;
	width: 400px;
}

.form h2{
	color: #F2A622;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 5px;
	text-transform: uppercase;
}

.form .form-content{
	margin: 45px 22px;
	text-align: left;
}

.form .form-content .form-box{
	margin-top: 25px;
}

.form .form-content .form-box label{
	color: #FFFFFF;
	display: block;
	font-size: 18px;
	letter-spacing: 2px;
	margin-bottom: 5px;
}

.form .form-content .form-box input{
	background: #2A2A2A;
	border: none;
	border-radius: 10px;
	box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.2), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
	color: #22F2AA;
	font-size: 18px;
	height: 50px;
	outline: none;
	padding: 5px 15px;
	width: 100%;
}

.form .form-content .form-box input[type="submit"]{
	box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.8);
	font-weight: 600;
	margin-top: 20px;
}

.form .form-content .form-box input[type="submit"]:active{
	box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.2), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
	color: #079D69;
	margin-top: 20px;
}

.form .form-content .form-box input::placeholder{
	color: #A2A2A2;
	font-size: 18px;
}

.form-forget{
	color: #A2A2A2;
	margin-top: 30px;
}

.form-forget a{
	color: #EF1A6B;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.