body {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background:#eee;
  font-family:sans-serif;
}

.container {
  width:800px;
  height:500px;
  position:relative;
  background:#fff;
  overflow:hidden;
}

.form-container {
  position:absolute;
  width:50%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:0.6s;
}

.sign-in { left:0; }
.sign-up { left:0; opacity:0; }

.container.active .sign-in {
  transform:translateX(100%);
}

.container.active .sign-up {
  transform:translateX(100%);
  opacity:1;
}

form {
  display:flex;
  flex-direction:column;
  width:70%;
}

input {
  margin:10px 0;
  padding:10px;
}

button {
  padding:10px;
  background:#3f51b5;
  color:#fff;
  border:none;
}

/* overlay */
.overlay-container {
  position:absolute;
  left:50%;
  width:50%;
  height:100%;
  overflow:hidden;
}

.overlay {
  position:relative;
  left:-100%;
  width:200%;
  height:100%;
  background:#3f51b5;
  color:#fff;
  transition:0.6s;
  display:flex;
}

.container.active .overlay {
  transform:translateX(50%);
}

.overlay-panel {
  width:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}