JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<body>
    <section>
        <h2>Here is a page.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis vestibulum ipsum, quis porta lectus fermentum ac. Sed feugiat congue odio, ac convallis nibh fringilla id. Etiam facilisis rutrum augue, sed volutpat justo laoreet vel. Sed viverra commodo sodales. Nunc turpis erat, gravida at commodo non, cursus non lectus. Sed cursus mattis laoreet. Aliquam arcu felis, lobortis vitae convallis eget, commodo vel libero. Sed porttitor tincidunt metus, lobortis sodales risus feugiat in. Phasellus sem dolor, feugiat eu bibendum fringilla, sollicitudin non velit. Fusce luctus condimentum mauris id dignissim. Suspendisse potenti. Etiam ornare semper leo ac sagittis. Fusce tristique porttitor mollis. Nunc vestibulum orci sit amet mi semper at hendrerit ipsum feugiat. Nulla facilisi. Cras facilisis ultricies risus ut vulputate. Vestibulum venenatis vestibulum arcu, ac cursus magna feugiat ut. Nunc lacinia commodo aliquet. Nulla in mattis libero. Proin ac purus lacus.</p>

        <p>Maecenas eu cursus tortor. Pellentesque id sagittis dolor. Nullam sed lectus leo, nec dictum nisi. Morbi dictum mattis nisl, non eleifend ligula accumsan sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, faucibus vel fringilla a, iaculis quis nisl. Fusce id semper tellus. Aliquam porttitor, justo interdum imperdiet faucibus, eros augue posuere est, quis tristique lorem risus sed lacus. Sed semper bibendum laoreet. Etiam gravida sodales pretium. Donec consectetur hendrerit nulla eget consequat. Pellentesque libero turpis, sagittis a venenatis a, sollicitudin eget est. Praesent tincidunt metus ac neque aliquet porta. Vestibulum nisi enim, luctus vel posuere ac, tincidunt in urna. Aliquam erat volutpat.</p>

        <p>Fusce et sem nulla, a sodales est. Nulla non libero ut dolor ullamcorper aliquam vitae sit amet lacus. Mauris auctor leo eu elit bibendum...

CSS

html { font-size: 62.5%; }

body { 
line-height:1.5; line-height: 2.4rem;
font-size: 16px; font-size:1.6rem;    
max-width: 600px; 
min-width: 320px; 
margin: 0 auto; 
font-family: sans-serif;
}

h2 { margin-top: 6px; font-size: 24px; font-size: 2.4rem; margin-bottom: 24px; margin-bottom: 2.4rem; }

p { margin-bottom: 24px; margin-bottom: 2.4rem; }
p:last-child { margin-bottom: 0px; margin-bottom: 0rem; }



section{
    margin: 24px 0;
    padding:  24px;
    border: 1px solid #eee;
       
    /* http://leaverou.me/css3patterns/#lined-paper */
    
    background-color: #fff; 
    
    background-image: 
   -webkit-linear-gradient(0deg, transparent 9px, #abced4 8px, #abced4 12px, transparent 12px),
   -webkit-linear-gradient(#eee .05em, transparent .05em);
    
    background-image: 
   -moz-linear-gradient(0deg, transparent 9px, #abced4 8px, #abced4 12px, transparent 12px),
   -moz-linear-gradient(#eee .05em, transparent .05em);
    
    background-image: 
   -ms-linear-gradient(0deg, transparent 9px, #abced4 8px, #abced4 12px, transparent 12px),
   -ms-linear-gradient(#eee .05em, transparent .05em);
    
    background-image: 
   -o-linear-gradient(0deg, transparent 9px, #abced4 8px, #abced4 12px, transparent 12pxx),
   -o-linear-gradient(#eee .05em, transparent .05em);
    
    background-image: 
   linear-gradient(0deg, transparent 9px, #abced4 8px, #abced4 12px, transparent 12px),
   inear-gradient(#eee .05em, transparent .05em);
   background-size: 100% 1.5em;


        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.03);
        -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.03);
        -ms-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.03);
        -o-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.03);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.03);
}