JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<section>
     <h1>Delicious</h1>
     <h2>Lobster</h2>

    
<h3>
<a name="a-third-level-header" class="anchor" href="#a-third-level-header"><span class="octicon octicon-link"></span></a>A Third Level Header</h3>

    
<h4>
<a name="a-fourth-level-header" class="anchor" href="#a-fourth-level-header"><span class="octicon octicon-link"></span></a>A Fourth Level Header</h4>

    
<h5>
<a name="a-fifth-level-header" class="anchor" href="#a-fifth-level-header"><span class="octicon octicon-link"></span></a>A Fifth Level Header</h5>

    
<h6>
<a name="a-sixth-level-header" class="anchor" href="#a-sixth-level-header"><span class="octicon octicon-link"></span></a>A Sixth Level Header</h6>

    <p>This is a paragraph. Cupcake ipsum dolor sit amet. Tiramisu liquorice gummies powder. Biscuit pastry pastry cake candy gummies carrot cake gingerbread. Gummi bears tart cupcake bonbon sugar plum biscuit. Icing marzipan tootsie roll. Pie gingerbread dragée wypas cookie. Faworki bonbon topping sweet soufflé jelly.</p>
    <p>And another paragraph. Jelly beans tootsie roll fruitcake toffee wypas chupa chups pudding. Soufflé muffin halvah powder sugar plum cake. Toffee cookie biscuit faworki pastry. Bonbon gummi bears topping caramels marshmallow. Chupa chups candy canes toffee. Powder powder candy canes pastry. Tootsie roll marshmallow powder.</p>
    <p><em>These words are emphasized</em>
        <br/><em>Also these words are emphasized</em>
    </p>
    <p><strong>These words are strong emphasized</strong>
        <br/><strong>Also these words are strong emphasized</strong>
    </p>
    <blockquote>
        <p>This is a very simple blockquote</p>
    </blockquote>
    <ul>
        <li>This</li>
        <li>is</li>
        <li>an</li>
        <li>unordered</li>
        <li>list.</li>
    </ul>
    <p>And...</p>
    <ol>
        <li>This</li>
        <li>is</li>
        <li>an</li>
        <li>ordered</li>
        <li>list.</li>
    </ol>
    <p><a href="http://example.com/">This...

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 700);
html {
    font-size: 62.5%;
}
body {
    background: #252525;
    color: #F4F2DE;
    font-family:"open sans", helvetica, sans-serif;
    margin: 0;
    font-size: 2rem;
    line-height: 2.6rem;
}
h1 {
    color: #5fdff1;
}
h2 {
    color: #D93C82;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: lobster;
    margin: 2rem 0;
}
h1 { font-size: 8rem; }
h2 { font-size: 6rem; }
h3 { font-size: 5rem; }
h4 { font-size: 4rem; }
h5 { font-size: 3rem; }
h6 { font-size: 2rem; }
a {
    color: inherit;
    border-bottom: 1px dotted;
    text-decoration: none;
}
section {
    margin: 2rem auto;
    max-width: 60rem;
}