JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<div class="table">
    <div class="row header">
        <h1>header</h1>
    </div>
    <div class="row body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis ultricies tristique. Nullam vel ultricies elit. Ut pulvinar, risus tincidunt commodo porttitor, nisl felis imperdiet risus, id venenatis mi arcu a nisi. Nulla facilisis aliquet vulputate. Aenean dictum interdum nibh, vel vestibulum diam blandit eu. Proin vehicula consectetur suscipit. In hac habitasse platea dictumst. Nullam mattis ipsum a nisi porttitor a facilisis velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec tortor nibh. Aenean quam diam, dictum ut commodo et, rhoncus nec dui. Nulla faucibus gravida sem, id fermentum diam elementum at.</p>
        <p>Aenean sit amet sem orci. Nulla tempor enim et sapien lacinia ut ultrices dolor cursus. Quisque magna sapien, tempor id elementum ac, bibendum ut tortor. Nunc vitae consectetur arcu. Vivamus enim augue, tristique quis laoreet ac, porta sit amet justo. Praesent quam sem, placerat vitae facilisis in, cursus a tellus. Nunc id nunc a quam posuere fringilla et vel purus. Cras fermentum justo at dolor vulputate pharetra. Nullam ac lorem ut velit pretium tristique vel id nulla. Phasellus aliquet risus id turpis suscipit eget vulputate massa consequat. Praesent lectus lacus, venenatis congue dapibus quis, tincidunt et libero. Donec nisl diam, aliquet quis placerat rhoncus, pellentesque sit amet magna. Aliquam erat volutpat. Pellentesque tempor ultricies justo ac dictum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat elit sit amet quam hendrerit aliquet. Pellentesque tristique dolor sapien. Nullam eu felis tincidunt metus tempor mattis. Praesent sit amet odio vitae mauris pulvinar vulputate et sit amet mi. Nulla facilisi. Quisque dapibus tellus vel nisi euismod non scelerisque lorem euismod. Sed nec tellus lacus. Sed ullamcorper sollicitudin...

CSS

html,body {
    height:100%;
    width:100%;
    font: 12px/18px Arial, sans-serif;
}
h1 {
    margin:0;
    padding:0.3em;
    font:3em Georgia;
}
.table {
    display:table;
    height:100%;
    width:100%;
}
.row {
    width:100%;
    display: table-row;
}
.header {
    background-color:#a00;
    color:#fff;
}
.body {
    background-color:#fefefe;
}
.body p {
    padding:0.25em 1em;
}