Sign Up / Login

index.html

<div class="iphones">
  <div class="iphone">
    <header class="header">
      <a href="#" class="button button--small">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <use xlink:href="#icon-arrow-left" />
        </svg>
      </a>
      <h1>Sign up</h1>
    </header>

    <main class="main">
      <div>
        <p>Sign up with one of the following options.</p>

        <ul class="buttons">
          <li>
            <a class="button button--full" href="#">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <use xlink:href="#icon-google" />
              </svg>
            </a>
          </li>
          <li>
            <a class="button button--full" href="#">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <use xlink:href="#icon-apple" />
              </svg>
            </a>
          </li>
        </ul>
      </div>

      <form class="form" action="#">
        <div class="form__field">
          <label class="form__label" for="name">Name</label>
          <input id="name" class="form__input" name="name" type="text" placeholder="Tim" />
        </div>

        <div class="form__field">
          <label class="form__label" for="email">Email</label>
          <input id="email" class="form__input" name="email" type="email" placeholder="[email protected]" />
        </div>

        <div class="form__field">
          <label class="form__label" for="password">Password</label>
          <input id="password" class="form__input" name="password" type="password" placeholder="Pick a strong password" />
        </div>

        <div class="form__field">
          <button class="button button--full button--primary" type="submit">
            Create Account
          </button>
        </div>
      </form>

      <div class="text--center">
        <p>Already have an account? <a href="#">Log in</a></p>
      </div>
    </main>
  </div>

  <div class="iphone">
    <header class="header">
      <a href="#" class="button button--small">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <use xlink:href="#icon-arrow-left" />
        </svg>
      </a>
      <h1>Log in</h1>
    </header>

    <main class="main">
      <div>
        <p>Log in with one of the following options.</p>

        <ul class="buttons">
          <li>
            <a class="button button--full" href="#">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <use xlink:href="#icon-google" />
              </svg>
            </a>
          </li>
          <li>
            <a class="button button--full" href="#">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <use xlink:href="#icon-apple" />
              </svg>
            </a>
          </li>
        </ul>
      </div>

      <form class="form" action="#">
        <div class="form__field">
          <label class="form__label" for="email">Email</label>
          <input id="email" class="form__input" name="email" type="email" placeholder="[email protected]" />
        </div>

        <div class="form__field">
          <label class="form__label" for="password">Password</label>
          <input id="password" class="form__input" name="password" type="password" placeholder="Enter your password" />
        </div>

        <div class="form__field">
          <button class="button button--full button--primary" type="submit">Log in</button>
        </div>
      </form>

      <div class="text--center">
        <p>Don't have an account? <a href="#">Sign up</a></p>
      </div>
    </main>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon-apple" viewBox="0 0 24 24">
    <path d="M22 17.607c-.786 2.28-3.139 6.317-5.563 6.361-1.608.031-2.125-.953-3.963-.953-1.837 0-2.412.923-3.932.983-2.572.099-6.542-5.827-6.542-10.995 0-4.747 3.308-7.1 6.198-7.143 1.55-.028 3.014 1.045 3.959 1.045.949 0 2.727-1.29 4.596-1.101.782.033 2.979.315 4.389 2.377-3.741 2.442-3.158 7.549.858 9.426zm-5.222-17.607c-2.826.114-5.132 3.079-4.81 5.531 2.612.203 5.118-2.725 4.81-5.531z"></path>
  </symbol>

  <symbol id="icon-google" viewBox="0 0 24 24">
    <path d="M7 11v2.4h3.97c-.16 1.029-1.2 3.02-3.97 3.02-2.39 0-4.34-1.979-4.34-4.42 0-2.44 1.95-4.42 4.34-4.42 1.36 0 2.27.58 2.79 1.08l1.9-1.83c-1.22-1.14-2.8-1.83-4.69-1.83-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.721-2.84 6.721-6.84 0-.46-.051-.81-.111-1.16h-6.61zm0 0 17 2h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2z" fill-rule="evenodd" clip-rule="evenodd"></path>
  </symbol>

  <symbol id="icon-arrow-left" viewBox="0 0 24 24">
    <path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z" />
  </symbol>
</svg>

sign-up-login.markdown

Sign Up / Login

Sign Up / Login forms on iPhone mobile view

Design by Oliver Cederborg https://dribbble.com/shots/15230513-Sign-up-Daily-UI-001

A Pen by Matt Daniel Brown on CodePen.

License.

style.postcss

@use postcss-preset-env {
  stage: 0;
}

* {
  box-sizing: border-box;
  outline-color: #951fae;
}

body {
  background-color: #302f37;
  color: #3d3d3d;
  display: grid;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  margin: 0;
  min-block-size: 100vh;
  padding: 10vmin;
  place-items: center;
}

a {
  color: #fcfcfc;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

a:focus,
a:hover {
  color: #e3e3e3;
}

button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
}

h1 {
  color: #fcfcfc;
  line-height: 1.2;
  margin: 0;
}

input {
  border: 0;
  color: inherit;
  font: inherit;
}

p {
  margin-block: 1em;
}

.header {
  align-items: center;
  display: flex;
  gap: 1em;
  margin-bottom: 3em;
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1.5em;
  width: 1.5em;
}

.buttons {
  display: flex;
  gap: 1em;
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
}

.buttons li {
  width: 100%;
}

.button {
  background-color: #171717;
  border: 1px solid #191919;
  border-radius: 1em;
  color: #fcfcfc;
  cursor: pointer;
  display: inline-block;
  padding: 0.875em 1.25em;
  text-align: center;
  transition: background-color 0.3s ease-in-out;
}

.button:focus,
.button:hover {
  background-color: #1f1f1f;
}

.button--full {
  width: 100%;
}

.button--primary {
  background-image: linear-gradient(135deg, #ae1fd1, #bf2f9a);
  border: 1px solid #951fae;
}

.button--primary:focus,
.button--primary:hover {
  background-image: linear-gradient(135deg, #bf2f9a, #ae1fd1);
}

.button--small {
  font-size: 0.75rem;
}

.iphones {
  display: flex;
  gap: 3em;
}

.iphones > :first-child {
  margin-top: 5.5em;
}

.iphone {
  aspect-ratio: 9 / 19.5;
  background-color: #101010;
  border-radius: 3em;
  box-shadow: 2.8px 2.8px 2.2px rgb(0 0 0 / 2%), 6.7px 6.7px 5.3px rgb(0 0 0 / 2.8%),
    12.5px 12.5px 10px rgb(0 0 0 / 3.5%), 22.3px 22.3px 17.9px rgb(0 0 0 / 4.2%),
    41.8px 41.8px 33.4px rgb(0 0 0 / 5%), 100px 100px 80px rgb(0 0 0 / 7%);
  height: 844px;
  overflow: hidden;
  padding: 3em 1.5em;
  width: 390px;
}

.form {
  display: grid;
  gap: 1.5em;
}

.form__input {
  background-color: #171717;
  border: 2px solid #191919;
  border-radius: 1em;
  padding: 1em 1.25em;
  transition: background-color 0.3s ease-in-out;
  width: 100%;
}

.form__input:focus,
.form__input:hover {
  background-color: #1f1f1f;
}

.form__label {
  color: #fcfcfc;
  display: inline-block;
  font-size: 0.875rem;
  margin-block-end: 0.5em;
  margin-inline: 0.5em;
}

.text--center {
  text-align: center;
}