<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;
}