JSFiddle - React, Tailwind, and code Playground

PXtoEM.com

by Jennifer Perrin

HTML

<div class="container">
    <div class="header">
        <h1><a href="http://pxtoem.com/">PXtoEM.com <span class="subtitle">PX to EM conversion made simple.</span></a></h1>
        <ul class="menu">
            <li class="menu-item current"><a href="#convert" class="menu-item-link">1. Convert</a></li>
            <li class="menu-item"><a href="#css" class="menu-item-link">2. Grab CSS</a></li>
            <li class="menu-item"><a href="#learn" class="menu-item-link">3. Learn</a></li>  
        </ul>
    </div>
    <div class="pages">
        <div class="page" id="convert">
            <div class="convert-base column">
                <h2>Select your body font size</h2>
                <h3>Conversions based on 16px browser default size</h3>
                <div class="conversion-column">
                    <table class="conversion-table base-table">
                        <col class="c25">
                        <col class="c25">
                        <col class="c25">
                        <col class="c25">
                        <thead>
                            <tr>
                                <th>Pixels</th>
                                <th>EMs</th>
                                <th>Percent</th>
                                <th>Points</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="convert-body column">
                <h2>Voil&#224;! Your conversions</h2>
                <h3>Conversions based on your body font size</h3>
                <div class="conversion-column">
                    <table class="conversion-table body-table">
                        <col class="c25">
                        <col class="c25">
                        <col class="c25">
                        <col class="c25">
                        <thead>
                           ...

CSS

* {
    position; relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}


html {
    overflow-y: scroll;
}

body {
    font: 12px/16px 'Helvetica Neue', Arial, sans-serif;
    background-color: #333;
    color: #fff;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: Georgia, 'Helvetica Neue', Arial, sans-serif;
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #f99;
}

p {
    margin: 0 0 16px;
}

dl {
    margin: 0 0 16px;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 16px;
}

dd + dt {
    margin: 16px 0 0;
}

ul {
    margin: 0 16px 16px;
}

input {
    font-size: 16px;
    padding: 8px;
    width: 60px;
}

.container {
    width: 950px;
    margin: 0 auto;
}

.header {
    height: 50px;
    margin-bottom: 32px;
}

h1 {
    float: left;
    width: 500px;
    background-color: #fff;
    background-image: -moz-linear-gradient(top, #fff 0%, #ccc 100%);
    background-image: -webkit-linear-gradient(top, #fff 0%, #ccc 100%);
    background-image: -o-linear-gradient(top, #fff 0%, #ccc 100%);
    background-image: -ie-linear-gradient(top, #fff 0%, #ccc 100%);
    background-image: linear-gradient(top, #fff 0%, #ccc 100%);
    height: 50px;
    color: #000;
    line-height: 48px;
    font-size: 16px;
    text-align: center;
    text-shadow: rgba(255,255,255,.5) 0 1px 0;
    border-bottom: 2px solid #2c2c2c;
}

h1 a {
    color: #000;
}

.subtitle {
    font: normal italic 12px/48px Georgia, 'Helvetica Neue', Arial, sans-serif;
    color: #666;
}

.menu {
    float: left;
    width: 450px;
    height: 50px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-item {
    float: left;
    width: 150px;
    padding-left: 10px;
    height: 50px;
}

.menu-item-link {
    -webkit-transition: background-color .2s;
    text-decoration: none;
    display: block;
    background-color: #111;
    background-image: -moz-linear-gradient(top, rgba(255,255,255,.1) 0%,...

JavaScript

"use strict";

/*! jQuery v1.7.2 jquery.com | jquery.org/license */
(function(a, b) {
    function cy(a) {
        return f.isWindow(a) ? a : a.nodeType === 9 ? a.defaultView || a.parentWindow : !1
    }
    function cu(a) {
        if (!cj[a]) {
            var b = c.body,
                d = f("<" + a + ">").appendTo(b),
                e = d.css("display");
            d.remove();
            if (e === "none" || e === "") {
                ck || (ck = c.createElement("iframe"), ck.frameBorder = ck.width = ck.height = 0), b.appendChild(ck);
                if (!cl || !ck.createElement) cl = (ck.contentWindow || ck.contentDocument).document, cl.write((f.support.boxModel ? "<!doctype html>" : "") + "<html><body>"), cl.close();
                d = cl.createElement(a), cl.body.appendChild(d), e = f.css(d, "display"), b.removeChild(ck)
            }
            cj[a] = e
        }
        return cj[a]
    }
    function ct(a, b) {
        var c = {};
        f.each(cp.concat.apply([], cp.slice(0, b)), function() {
            c[this] = a
        });
        return c
    }
    function cs() {
        cq = b
    }
    function cr() {
        setTimeout(cs, 0);
        return cq = f.now()
    }
    function ci() {
        try {
            return new a.ActiveXObject("Microsoft.XMLHTTP")
        } catch (b) {}
    }
    function ch() {
        try {
            return new a.XMLHttpRequest
        } catch (b) {}
    }
    function cb(a, c) {
        a.dataFilter && (c = a.dataFilter(c, a.dataType));
        var d = a.dataTypes,
            e = {},
            g, h, i = d.length,
            j, k = d[0],
            l, m, n, o, p;
        for (g = 1; g < i; g++) {
            if (g === 1) for (h in a.converters) typeof h == "string" && (e[h.toLowerCase()] = a.converters[h]);
            l = k, k = d[g];
            if (k === "*") k = l;
            else if (l !== "*" && l !== k) {
                m = l + " " + k, n = e[m] || e["* " + k];
                if (!n) {
        ...