.content {
  background: #EEE;
  max-width: 400px;
  padding: 20px;
  margin: 50px auto;
}

[type=text],
[type=email],
[type=password] {
  box-sizing: border-box;
  width:100%;
  border-radius:4px;
  border:1px solid #CCC;
  padding:10px 15px;
}

.rules {
  list-style: none;
  padding: 10px;
  columns:2 150px;
  font: small arial;
}

.rules li:before {
  color: #CCC;
  content: '\2714';
  display: inline-block;
  font-size: large;
  margin-right: 5px;
  vertical-align: middle;
}

.rules .pass:before {
  color: #0bc;
}

.password {
  position: relative;
  display: flex;  
}

.reveal {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  bottom:0;
  width: 40px;
  height: 100%;
  background:green;
  content: '';
  display: inline-block;
  opacity: 0.3;
  background: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 24 24" height="24" width="24"><g transform="scale(0.015625 0.015625)"><path d="M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"/></g></svg>') no-repeat 4px 4px;
  background-position: 5px 15px;
}