JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="container">
<div class="grid-12">
<header>
            <hgroup>
                <h1>Grouped Heading 1</h1>
                <h2>Grouped Heading 2</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">navigation item #1</a></li>
                    <li><a href="#">navigation item #2</a></li>
                    <li><a href="#">navigation item #3</a></li>
                </ul>
            </nav>
        </header>
        
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>

        <p hidden>This should be hidden in all browsers, apart from IE6</p>
        
        <section>
            <h1>Section Heading 1</h1>            
            <article>
                <h4>Article Heading 2</h4>
                <address>Address: somewhere, world</address>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
            </article>
        </section>
        
        <h1>Text-level semantics</h1>

        <p>
        The <a href="#">a element</a> example<br>
        The <abbr...

CSS

* { margin:0; padding:0; text-rendering:optimizeLegibility; }

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

/*- add display for embedded HTML5 elements ----------*/ 
audio,
canvas,
video {
    display:inline-block;
    *display:inline;
    *zoom:1;
    }
    
audio:not([controls]) {    
    display:none; 
    }
    
[hidden] { 
    display:none; 
    }

/*- fluid images and objects ----------*/
img,
object,
embed,
video,
audio {
    max-width:100%;
    height:auto;
    }

figure img, figure object, figure embed, figure video {
    width: 100%;
    max-width: 100%;
    display: block;
    }

a img { 
    border: none;
    }

img {
    border: 0; 
    vertical-align:middle;
    -ms-interpolation-mode: bicubic; 
    }

svg:not(:root) {
    overflow: hidden;
    }

figure {
    margin: 0;
    }

/*- forms/input ----------*/
form {
    margin: 0;
    }

legend {
    border: 0; 
    *margin-left: -7px; 
    }

button,
input,
select,
textarea {
    font-size: 100%; 
    margin: 0; 
    vertical-align: baseline; 
    *vertical-align: middle; 
    }

button,
input {
    line-height: normal; 
    *overflow: visible;  
    }

table button,
table input {
    *overflow: auto;
    }

button,
html input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; 
    -webkit-appearance: button; 
    }

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; 
    padding: 0; 
    }

input[type="search"] {
    -webkit-appearance: textfield; 
    -webkit-box-sizing: content-box; 
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    }

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    }

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
    }


textarea {
    overflow: auto; 
    vertical-align: top; 
    }

input, 
textarea {
   ...

JavaScript

// http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm

            $(function() {
                var lineHeight = parseInt($('body').css('line-height'));
                function balanceHeight(el) { 
                    var h = $(el).outerHeight();
                    var delta = h % lineHeight;
                    if (delta != 0)
                    {
                        /* For images and objects, we want to align the bottom w/ the baseline, so we 
                        * pad the top of the element. For other elements (text elements that have a
                        * scrollbar), we pad the bottom, to keep the text within on the same baseline */
                        var paddingDirection = ($(el).is('img') || $(el).is('object')) ? 
                                                                'padding-top' : 'padding-bottom';

                        /* Adjust padding, because margin can get collapsed and cause uneven spacing */
                        var currentPadding = parseInt($(el).css(paddingDirection));
                        $(el).css(paddingDirection, currentPadding + lineHeight - delta);
                    }
                }

                $('img, pre, object, embed, figure, audio, video').each(function() {
                    /* Only works if we're manipulating block objects */
                    if ($(this).css('display') == 'inline')
                    {
                        $(this).css('display', 'block');
                    }

                    /* Images need to load before you get their height */
                    if ($(this).is('img'))
                    {
                        $(this).load(function(){ balanceHeight(this); });
                    }
                    else
                    {
                        balanceHeight(this);
                    }
                });
            });

/*global jQuery */
/*! 
* FitVids 1.0
*
* Copyright 2011, Chris Coyier -...