JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.6.0/base-min.css&amp;pure/0.6.0/grids-min.css&amp;pure/0.6.0/forms-min.css">
<widgets class="pure-g">
    <div id="search-2" class="pure-u-1 pure-u-md-1-2 l-box widget widget_search">
        <form role="search" method="get" id="searchform" class="searchform" action="http://localhost/wp/">
            <div>
                <label class="screen-reader-text" for="s">Search for:</label>
                <input type="text" value="" name="s" id="s" />
                <br>
                <input type="submit" id="searchsubmit" value="Search" />
            </div>
        </form>
    </div>
    <div id="recent-posts-2" class="pure-u-1 pure-u-md-1-2 l-box widget widget_recent_entries">
         <h2>Recent Posts</h2> 
        <ul>
            <li> <a href="http://localhost/wp/index.php/2015/08/25/wordpress-themes-are-just-being-released-today/">WordPress themes are just being released today all over the World 1200 GMT</a>

            </li>
            <li> <a href="http://localhost/wp/index.php/2015/08/24/hello-world/">Hello world!</a>

            </li>
            <li> <a href="http://localhost/wp/index.php/2013/01/11/markup-html-tags-and-formatting/">Markup: HTML Tags and Formatting</a>

            </li>
            <li> <a href="http://localhost/wp/index.php/2013/01/10/markup-image-alignment/">Markup: Image Alignment</a>

            </li>
            <li> <a href="http://localhost/wp/index.php/2013/01/09/markup-text-alignment/">Markup: Text Alignment</a>

            </li>
        </ul>
    </div>
</widgets> <pre style='font-size:8px;'><prepend></prepend></pre>

CSS

/** Front page widgets ***/
 .widget {
    font-size: 1.7vw;
}
.gray {
    background: #eee;
}
.widget img {
    display:block;
    margin: 20px;
}
.widget:nth-child(odd) {
    background: #eee
}
.widget p {
    overflow:hidden;
    margin-left: 2em;
    display: block
}
.widget h2 {
    margin:0;
    padding-bottom: 0.7em
}

JavaScript

Element.prototype.serializeWithStyles = (function () {

    // Mapping between tag names and css default values lookup tables. This allows to exclude default values in the result.
    var defaultStylesByTagName = {};

    // Styles inherited from style sheets will not be rendered for elements with these tag names
    var noStyleTags = {
        "BASE": true,
        "HEAD": true,
        "HTML": true,
        "META": true,
        "NOFRAME": true,
        "NOSCRIPT": true,
        "PARAM": true,
        "SCRIPT": true,
        "STYLE": true,
        "TITLE": true
    };

    // This list determines which css default values lookup tables are precomputed at load time
    // Lookup tables for other tag names will be automatically built at runtime if needed
    var tagNames = ["A", "ABBR", "ADDRESS", "AREA", "ARTICLE", "ASIDE", "AUDIO", "B", "BASE", "BDI", "BDO", "BLOCKQUOTE", "BODY", "BR", "BUTTON", "CANVAS", "CAPTION", "CENTER", "CITE", "CODE", "COL", "COLGROUP", "COMMAND", "DATALIST", "DD", "DEL", "DETAILS", "DFN", "DIV", "DL", "DT", "EM", "EMBED", "FIELDSET", "FIGCAPTION", "FIGURE", "FONT", "FOOTER", "FORM", "H1", "H2", "H3", "H4", "H5", "H6", "HEAD", "HEADER", "HGROUP", "HR", "HTML", "I", "IFRAME", "IMG", "INPUT", "INS", "KBD", "KEYGEN", "LABEL", "LEGEND", "LI", "LINK", "MAP", "MARK", "MATH", "MENU", "META", "METER", "NAV", "NOBR", "NOSCRIPT", "OBJECT", "OL", "OPTION", "OPTGROUP", "OUTPUT", "P", "PARAM", "PRE", "PROGRESS", "Q", "RP", "RT", "RUBY", "S", "SAMP", "SCRIPT", "SECTION", "SELECT", "SMALL", "SOURCE", "SPAN", "STRONG", "STYLE", "SUB", "SUMMARY", "SUP", "SVG", "TABLE", "TBODY", "TD", "TEXTAREA", "TFOOT", "TH", "THEAD", "TIME", "TITLE", "TR", "TRACK", "U", "UL", "VAR", "VIDEO", "WBR"];

    // Precompute the lookup tables.
    for (var i = 0; i < tagNames.length; i++) {
        if (!noStyleTags[tagNames[i]]) {
            defaultStylesByTagName[tagNames[i]] = computeDefaultStyleByTagName(tagNames[i]);
        }
    }

    function...