<div class="demo">
  <form class="form" action="submit">
    <label for="name">Subscribe Today!</label>
    <input class="form__inset" type="text" placeholder="Email" name="email">
  </form>
</div>
// Variables
$color-background: hsl(224, 24%, 32%);
$color-inset: hsl(230, 22%, 27%);
$shadow-inset: inset 0 2px 2px hsla(0, 0%, 0%, .35), 0 2px 0 hsla(0, 0%, 100%, .15);

// Setup
html {
  font-family: montserrat;
}

.demo {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $color-background;
}

// Form Styling
::placeholder {
  color: hsla(0, 0, 100%, .6);
}

.form {
  display: flex;
  flex-direction: column;

  & label {
    color: #fff;
    letter-spacing: .15em;
    margin-bottom: -.75rem;
    font-weight: bold;
  }

  &__inset {
    border: none;
    background: $color-inset;
    box-shadow: $shadow-inset;
    width: 35rem;
    margin: 2rem 0;
    padding: 1rem .5rem;
    color: #fff;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.