JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class='flex flex-column viewport-height'>
  <div class='flex flex-grow scrollable'>
    <div class='flex center-center'>
      <div class='login'>
        <label>
          Benutzername
          <input type='text'>
        </label>
        <label>
          Kennwort
          <input type='password'>
        </label>
        <button type='button'>
          Anmelden
        </button>
      </div>
    </div>
  </div>
  <div class='footer'>
    footer
  </div>
</div>

SCSS

*{margin:0;padding:0;box-sizing:border-box; font-family:arial; border:0 none;outline:0;}

.viewport-height{height:100vh;}
.full-height{height:100%;}

.flex{
  position:relative;
  display: flex;
  flex: 1;
  flex-wrap: nowrap;
  &.flex-column{ flex-direction: column; }
  
  &.center-center{
    align-items: center;
    justify-content: center;
  }
  
  &.stretch{
    align-items: stretch;
  }
  
  .flex-grow{
    position: relative;
    flex-grow: 1;
  }
}

.login{
  padding: 20px;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
}

.footer{
  position: relative;
  z-index: 1;
  padding: 10px;
  background-color: #eee;
}

.scrollable{
  overflow: auto;
}

label{display:block;margin-bottom:10px;}
input{display:block;width:100%;padding:10px;border:1px solid #eee;font-size:16px;}
button{display:block;width:100%;padding:15px;}


.pos-full{position:absolute;width:100%;height:100%;}