JSFiddle - React, Tailwind, and code Playground

by kizer

HTML

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Raleway:300|Merriweather+Sans"></script>
<div id="page1" class="page">
    <div class="title">This is
        <br />A Heading</div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod tincidunt orci in auctor. Nunc ut pharetra dolor. Nunc vel arcu vitae justo commodo consequat.</div>
    <table>
        <tr>
            <td><i class="icon-bar-chart icon-4x"></i>
            </td>
            <td><i class="icon-bar-chart icon-4x"></i>
            </td>
            <td><i class="icon-bar-chart icon-4x"></i>
            </td>
        </tr>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
            <th>Heading 3</th>
        </tr>
        <tr>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel augue quam. Maecenas non arcu elit, nec mattis arcu. Aenean porta accumsan dui eget dignissim.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel augue quam. Maecenas non arcu elit, nec mattis arcu. Aenean porta accumsan dui eget dignissim.</td>
            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel augue quam. Maecenas non arcu elit, nec mattis arcu. Aenean porta accumsan dui eget dignissim.</td>
        </tr>
    </table>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
}
.page {
    margin: auto;
    width: 960px;
    height: 745px;
    color: black;
    background-color: #eee;
    text-align: center;
    font-family: Raleway, Helvetica, Arial, sans-serif;
}
.title {
    padding-top: .5em;
    margin-bottom: .5em;
    font-size: 4em;
    font-weight: bold;
    font-family:'Merriweather Sans', Arial, Helvetica, sans-serif;
}
.text {
    margin: 1em 0;
    font-size: 2em;
    line-height: 150%;
    letter-spacing: .1em;
}
table {
    border: none;
    width: 100%;
    padding: 0;
}
td {
    width: 33%;
    padding: 1em;
    line-height: 150%;
}
th {
    width: 33%;
    font-size: 1.35em;
    font-weight: bold;
}

JavaScript

function zoomit() {
    $("#page1").css('zoom', $(window).width() / $("#page1").width());
}

$(document).ready(zoomit);

$(window).resize(zoomit);