JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<main>
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis cum vel aperiam distinctio tempore autem, facere, esse eos quis saepe accusamus aliquid voluptatum incidunt rem nam impedit perferendis aspernatur. Repellat.</p>
  <footer>
    <button>Back</button>
    <button>Next</button>
  </footer>
</main>

CSS

html,
body {
  margin: 0;
  padding: 0;
  background: #c9c9c9;
  display: flex;
  width: 100%;
  height: 100%;
  font-family: Arial;
  color: #454545;
}

main {
  padding: 1em;
  margin: auto;
  width: 22em;
  height: 26em;

  background: white;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;

  display: flex;
}

button {
  width: 8em;
}

button:first-of-type {
  margin-left: auto;
  margin-right: 0.5em;
}

button:last-of-type {
  background: #3339cc;
  color: white;
}