JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<p>Bacon ipsum dolor sit amet spare ribs swine drumstick, pastrami filet mignon tenderloin pancetta leberkäse biltong bacon shank sausage ball tip. Ground round andouille spare ribs pancetta sausage ham. Frankfurter pork chop leberkäse bacon, ham hock capicola chuck hamburger fatback kielbasa meatball meatloaf tri-tip tenderloin. Capicola tri-tip cow drumstick, shank kielbasa hamburger shoulder. Sirloin short ribs ground round bacon, ham spare ribs turducken brisket beef ribs meatloaf sausage swine. Beef ribs capicola andouille, bacon cow shoulder ribeye turkey leberkäse flank fatback jerky. Jowl shank biltong, cow ribeye spare ribs ball tip drumstick tri-tip meatloaf short loin short ribs.</p>

    <p>Brisket shank tri-tip, pork loin tail swine leberkäse pastrami ribeye filet mignon pork belly ground round ham pork. Frankfurter corned beef bresaola, shoulder andouille jowl meatloaf. Ground round bacon drumstick turkey tongue jerky. Short loin brisket pastrami turducken pork loin strip steak, meatloaf leberkäse. Beef ribs andouille jowl pork chicken. Shankle spare ribs ham chicken short loin, sirloin flank turducken chuck. Swine beef ribs ground round tongue, ham hock andouille venison.

    <p>Shoulder brisket bacon, capicola spare ribs beef ribs swine turkey tri-tip meatball boudin. Filet mignon ham hock shoulder, pork chop pig salami spare ribs capicola tenderloin jerky ham turkey. Pork loin turducken prosciutto, meatball beef capicola pancetta. Shankle beef shank, pancetta pig shoulder jowl capicola tri-tip tenderloin hamburger pork loin. Tri-tip chicken pancetta, pork belly beef ribs tail jerky rump ham beef shankle. Hamburger pork beef ribs pork belly filet mignon cow ribeye, swine shank salami prosciutto biltong. Ground round meatball jerky tail, andouille short ribs brisket.</p>

    <p>Tongue boudin chicken shank. Sirloin chuck andouille spare ribs, turkey bacon pork chop. Bacon meatloaf filet mignon spare ribs brisket. Filet mignon rump sirloin, venison...

CSS

/*- base ----------*/
html {
    overflow-y: auto; 
    height: 100%;
}

body {
    min-height: 100%;
    overflow-x: hidden;
}

/*- base type ----------*/
html { 
    font-size: 100%;
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { 
    font-family: sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;    
}

p { 
    margin: 0 0 1.5rem 0;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;
}

p:last-child {
    margin: 0 0 0 0; 
}

/*- headings ----------*/
h1, h2, h3, h4, h5, h6 { 
    font-weight: bold; 
    margin-bottom: 1.5rem; 
    }

h1, h1 a { font-size: 1.625rem; /* 26px */ }
h2, h2 a { font-size: 1.5rem; /* 24px */ }
h3, h3 a { font-size: 1.375rem; /* 22px */ }
h4, h4 a { font-size: 1.25rem; /* 20px */ }
h5, h5 a { font-size: 1.125rem; /* 18px */ }
h6, h6 a { font-size: 1rem; /* 16px */ }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin:0; }

/*- Grid ----------*/
.container {
    width: 92%;
    max-width: 960px; 
    margin: 0 auto;
    position: relative;
    }

.grid-1,
.grid-2,
.grid-3,
.grid-full {
    float:left;
    position:relative;
    margin-left:1%;
    margin-right:1%
    }

.grid-1 { 
    width:31.333%; 
    }
    
.grid-2 { 
    width:64.667%; 
    }
    
.grid-3,
.grid_full { 
    width:98.0%;
    }

.grid-right { 
    float:right;
    }