JSFiddle - React, Tailwind, and code Playground

by vzytoi

HTML

<div class="formContainer">
    <span class="formContent"></span>
    <span class="formRemember">Se souvenir de moi</span>
    <span class="formSubmit">Envoyer</span>
</div>

CSS

* { 
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #fff;
  font-size: 9px;
  font-family: monospace;
}

.formContainer {
  height: 200px;
  width: 350px;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  border: 2px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

span.formSubmit {
  height: 20px;
  width: calc(350px - 4px);
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
    cursor: pointer;
}

span.formRemember {
  height: 20px;
  width: calc(350px - 4px);
  background: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
    cursor: pointer;
}

span.formContent {
  width: calc(350px - 4px);
  height: calc(200px - (2 * 20px));
  background: red;
}