Forms

<div class="gray asap m-l3">
  <form class="p-10 border shadow br-b-8 md-w-50pc mx-auto">
    <div class="flex flex-column">
      <label class="my-2" for="email-input">Email address</label>
      <input type="email" class="input" id="email-input">
    </div>
    <div class="flex flex-column mt-3">
      <label class="my-2" for="password-input">Password</label>
      <input type="password" class="input" id="password-input">
    </div>
    <div class="flex items-center mt-4">
      <input type="checkbox" class="checkbox mr-3" id="tnc-input">
      <label class="form-check-label" for="tnc-input">Accept terms and conditions</label>
    </div>
    <div class="mt-4">
      <button type="submit" class="button">Submit</button>
    </div>
  </form>
</div>

<div class="gray asap m-l3">
  <form class="p-10 border shadow br-b-8 md-w-50pc mx-auto">
    <div class="flex flex-column md-flex-row max-w-90pc mx-auto">
      <input type="email" class="input m-2" placeholder="Email address">
      <input type="password" class="input m-2" placeholder="Password">
      <button type="submit" class="button m-2">Submit</button>
    </div>
  </form>
</div>

<div class="gray asap m-l3">
  <form class="p-10 border shadow br-b-8 md-w-50pc mx-auto">
    <div class="flex">
      <input type="text" class="input m-2 flex-equal" placeholder="Name">
      <input type="email" class="input m-2 flex-equal" placeholder="Email address">
    </div>
    <div class="flex">
      <input type="password" class="input m-2 flex-equal" placeholder="Password">
      <input type="password" class="input m-2 flex-equal" placeholder="Confirm Password">
    </div>
    <div class="flex">
      <button class="button m-2 w-100pc">SIGN UP</button>
    </div>
  </form>
</div>