JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<header id="html4">
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>
        </ul>
    </nav>
    <hr /><!-- see the actual hr element -->
</header>


<header id="bottom">
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>
        </ul>
    </nav>
</header>

<header id="left-right">
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>
        </ul>
    </nav>
</header>


<header>
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>
        </ul>
    </nav>
</header>


<header>
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>
        </ul>
    </nav>
</header>


<header>
    <h1>Header</h1>
    <nav>
        <ul>
            <li><a href="#">link</a></li>            
            <li><a href="#">link</a></li>            
            <li><a...

CSS

/*- html5 elements ----------*/ 
article,aside,canvas,details,figcaption,figure,figure img,footer,header,hgroup,menu,nav,section,summary,hr{display:block;}

/*- base reset ----------*/ 
html,body,div,span,applet,object,iframe,table,caption,tbody,tfoot,thead,tr,th,td,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{vertical-align:baseline;background:transparent;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:100%;outline:0;border:0;margin:0;padding:0;}

body{color:#444;font:13px/1.231 sans-serif;*font-size:small;}

/*- genreic type ----------*/
address{font-style:normal;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
del{text-decoration:line-through;}
em{font-style:italic;}
ins{text-decoration:underline;font-style:italic;}
mark{background-color:#FF0;color:#000;}
small{font-size: 75%;line-height:inherit;}
q{quotes:none;}
q:before,q:after{ content:"";content:none;}

/*- headers  ----------*/
h1,h2,h3,h4,h5,h6{font-weight:normal;}

/*- code styles ----------*/
kbd,pre,code,samp{font-family:monospace,monospace;_font-family:'Courier New',monospace,monospace;} 

/* remember to fix line-height on main stylesheet */
pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word;}

/*- link styles ----------*/ 
a{border:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;text-decoration:none;}
a:link,a:target,a:hover,a:active,a:focus{outline:none;}
a img,:link img,:visited img{border:none;}


/* lists (comment out, depending on amount of lists used) */
ul,ol {list-style: none;}

/*- auto fix nav ul/ol ----------*/
nav ul,nav...