JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class='flex flex-column flex-center-center vh scrollable'>
  <div class='login'>
    a
  </div>
</div>

SCSS

*{margin:0; padding:0; box-sizing:border-box;}
html, body{font-family:arial;}

.vh{height:100vh;}
.scrollable{overflow:auto;}

.mock{height:2000px;}

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

.login{
  width: 100px;
  height: 200px;
  min-height: 200px;
  background-color: tomato;
  border: 5px solid lightblue;
}