login.html.erb

application.scss

// #################################

.yllw-fullscreen-hero{
  background-color: #eff3f6;
  padding: 35px 40px;
  padding-top: 35px;
  padding-right: 40px;
  padding-bottom: 35px;
  padding-left: 40px;
  border-radius: 5pt;
}

.yllw-fullscreen-hero-text{
  
}

login.html.erb

<div class="slds-grid slds-wrap slds-grid--align-center">
  <form class="slds-form--inline yllw-fullscreen-hero">

    <div class="slds-form-element__row">
      <label class="slds-form-element__control slds-size--1-of-1">
        <div class="slds-input-has-icon slds-input-has-icon--left">
          <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#email"></use>
          </svg>
          <input id="email" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Email"/>
        </div>
      </label>
    </div>

    <div class="slds-form-element__row">
      <label class="slds-form-element__control slds-size--1-of-1">
        <div class="slds-input-has-icon slds-input-has-icon--left">
          <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#lock"></use>
          </svg>
          <input id="password" class="slds-input" type="text" aria-autocomplete="list" role="combobox" aria-expanded="true" aria-activedescendant="" placeholder="Password"/>
        </div>
      </label>
    </div>

    <div class="slds-grid slds-large-size--1-of-1 slds-grid--align-center">
      <button class="yllw-fullscreen-hero-features-secondary__button-get-started--large slds-m-top--small">Login</button>
    </div>

    <div class="slds-grid slds-grid--align-center">
      <p>
        Forgot password?
        <button class="slds-button">Reset it</button>
      </p>
    </div>

  </form>
  <div class="slds-grid slds-large-size--1-of-1 slds-grid--align-center">
    <button class="yllw-fullscreen-hero-features-secondary__button-get-started--large slds-m-top--small">Sign up for an account</button>
  </div>
</div>