JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>
  <main>
      <h1>My 2nd CSS Example</h1>
      <div class="fixed">
      	This is a paragraph.
        <br>This is a paragraph.
      </div>
      <div class="scrolled">
      	This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This is a paragraph.
        <br>This...

CSS

html {
  margin:0;
  padding:0;
  height:100%;
}
body {
  background-color: lightblue;
  padding: 0;
  margin: 0;
  height:100%;
}

main {
  height:100%;
  display: flex;
  background-color: #999;
  flex-direction: column;
}

h1 {
  flex: 0 0;
  text-align: center;
}

.fixed {
  flex: 0 0;
  background: #c0c;
}
.scrolled {
  flex: 1 1;
  background: #cc0;
  overflow: auto;
}