<div class="container">
	<div class="panel">
		<div class="panel-header">
			<div class="panel-header-logo">
				<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" xml:space="preserve" height="500" width="500" version="1.0" viewBox="0 0 5.5555557 5.5555555">
	<g transform="matrix(1.0755 0 0 1.0755 -3.5103 -1.6684)">
		<path fill="#3071cd" d="m5.8465 1.9131c0.57932 0 1.1068 0.222 1.5022 0.58547-0.1938-0.0052-0.3872 0.11-0.3952 0.3738-0.0163 0.5333 0.6377 0.6469 0.2853 1.7196l-0.2915 0.8873-0.7939-2.3386c-0.0123-0.0362 0.002-0.0568 0.0465-0.0568h0.22445c0.011665 0 0.021201-0.00996 0.021201-0.022158v-0.13294c0-0.012193-0.00956-0.022657-0.021201-0.022153-0.42505 0.018587-0.8476 0.018713-1.2676 0-0.0117-0.0005-0.0212 0.01-0.0212 0.0222v0.13294c0 0.012185 0.00954 0.022158 0.021201 0.022158h0.22568c0.050201 0 0.064256 0.016728 0.076091 0.049087l0.3262 0.8921-0.4907 1.4817-0.8066-2.3758c-0.01-0.0298 0.0021-0.0471 0.0308-0.0471h0.25715c0.011661 0 0.021197-0.00996 0.021197-0.022158v-0.13294c0-0.012193-0.00957-0.022764-0.021197-0.022153-0.2698 0.014331-0.54063 0.017213-0.79291 0.019803 0.39589-0.60984 1.0828-1.0134 1.8639-1.0134l-0.0000029-0.0000062zm1.9532 1.1633c0.17065 0.31441 0.26755 0.67464 0.26755 1.0574 0 0.84005-0.46675 1.5712-1.1549 1.9486l0.6926-1.9617c0.1073-0.3036 0.2069-0.7139 0.1947-1.0443h-0.000004zm-1.2097 3.1504c-0.2325 0.0827-0.4827 0.1278-0.7435 0.1278-0.2247 0-0.4415-0.0335-0.6459-0.0955l0.68415-1.9606 0.70524 1.9284v-1e-7zm-1.6938-0.0854c-0.75101-0.35617-1.2705-1.1213-1.2705-2.0075 0-0.32852 0.071465-0.64038 0.19955-0.92096l1.071 2.9285 0.000003-0.000003zm0.95023-4.4367c1.3413 0 2.4291 1.0878 2.4291 2.4291s-1.0878 2.4291-2.4291 2.4291-2.4291-1.0878-2.4291-2.4291 1.0878-2.4291 2.4291-2.4291zm0-0.15354c1.4261 0 2.5827 1.1566 2.5827 2.5827s-1.1566 2.5827-2.5827 2.5827-2.5827-1.1566-2.5827-2.5827 1.1566-2.5827 2.5827-2.5827z"/>
	</g>
</svg>
			</div>
			<h1 class="panel-header-title">Sign in
				<h1 />
				<p class="panel-header-info">Don't have a Wordpress account? <a href="#" class="link">Create an account</a></p>
		</div>
		<form class="form" action="javascript:void(0);">
			<div class="input">
				<label class="input-label">E-mail</label>
				<input type="email" class="input-field" />
			</div>
			<div class="input">
				<label class="input-label">Password</label>
				<input type="password" class="input-field" />
			</div>
			<div class="input">
				<button class="input-submit">Sign in</button>
			</div>
		</form>
		<div class="panel-footer">
			<p class="panel-footer-info">Forgot your username or password? <a href="#" class="link">Restore account</a></p>
		</div>
	</div>
</div>
*, *:after, *:before {
	box-sizing: border-box;
}

:root {
	--primary-text-color: #043959;
	--primary-color: #3071cd;
	--secondary-color: #2e69cb;
}

:focus {
	outline: .125rem solid var(--primary-color);
	outline-offset: .125rem;
}

body {
	font-family: "Inter", sans-serif;
	color: var(--primary-text-color);
	line-height: 1.5;
	font-size: 1em;
}

// RESET
input, button {
	font: inherit;
	border-radius: 0;
	border: 0;
	background-color: transparent;
	box-shadow: none;
}
// END RESET 

.container {	
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;	
	background-image: linear-gradient(135deg, #52E5E7 5%, #130CB7 100%);
}

.panel {
	background-color: #FFF;
	max-width: 34rem;
	display: flex;
	flex-direction: column;
	padding: 4rem 3rem;
	border-radius: .5rem;
	box-shadow: .75rem .75rem 1.75rem 0 rgba(#000, .25);
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.panel-header-logo {
	width: 5rem;
	height: 5rem;
	svg {
		max-width: 100%;	
		max-height: 100%;
	}
}

.panel-header-title {
	margin-top: 1.5rem;
	font-size: 1.75rem;
	font-weight: 700;
}

.panel-header-info {
	margin-top: 1rem;
	text-align: center;
}

.link {
	text-decoration: none;
	color: var(--primary-color);
	border-bottom: 0.0625rem solid;
	&:hover {
		color: var(--secondary-color);
	}
}

.form {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
}

.input {
	display: flex;
	flex-direction: column;
	& + .input {
		margin-top: 1.5rem;
	}
}

.input-label {
	font-weight: 600;
}

.input-field {
	margin-top: .25rem;
	border: 0.0625rem solid #999;
}

.input-submit {
	padding: 1rem;
	background-color: var(--primary-color);
	color: #FFF;
	&:hover {
		background-color: var(--secondary-color);
	}
}

.input-field, .input-submit {
	padding: .5rem .75rem;
	min-height: 3rem;
}

.panel-footer {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.panel-footer-info {
	text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.