JSFiddle - React, Tailwind, and code Playground

by msm595

HTML

<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,500,700' rel='stylesheet' type='text/css'>
<div class="block">
    <div class="header"></div>
    <div class="info">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Minecraft_Block.svg/200px-Minecraft_Block.svg.png" alt="grass" title="a grass block">
        <h1>Grass <span class="blockId">02</span></h1>
        <dl>
            <dt>Affected by physics</dt>
            <dd>No</dd>
            <dt>Transparency</dt>
            <dd>No</dd>
            <dt>Emits light</dt>
            <dd>No</dd>
            <dt>Can be stacked</dt>
            <dd>Yes (64)</dd>
            <dt>Blast Resistance</dt>
            <dd>3</dd>
            <dt>Best mined with a shovel</dt>
        </dl>
    </div>
    <div class="content">
        <p>A Grass Block is a block that was introduced very early in the game. It uses 3 textures: a grey one for the top which is then tinted to the correct colour according to what <a href="#Biome">biome</a> the block is in, one borrowed from the <a href="#dirt">dirt</a> block for the bottom, and an edited dirt texture with grass on the top edge on all of the sides. When covered by <a href="#snow">snow</a> the side texture is white. On natural maps, grass appears on topmost blocks of dirt with no fluids or opaque solid blocks above them.</p>

        <p>In mining, grass blocks behave just like dirt - they drop dirt resources and are best dug with a shovel; however, they make a different sound when harvested and take slightly longer to dig up. This can be used to tell when the player is about to break the surface when tunneling upwards. </p>

        <h2>Growth</h2>
        <p>Grass blocks grow spontaneously only during map generation. Afterward, they can only spread from a nearby block. Grass blocks can spread to any immediately adjacent dirt blocks at the same height,...

CSS

html {
    height: 100%;
}

body {
    font-family: 'Maven Pro', sans-serif;
    font-weight: 100;
    margin: 0;
    color: #333;
    height: 100%;
    background-color: #222;
    font-size: 22px;
    line-height: 1.4;
    text-shadow: 0 1px #eee;
    font-weight: 100;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Rockwell Light', 'Rokkitt', serif;
    font-weight: 100;
    margin: 0;
    color: #111;
    line-height: 1;
}

h1 {
    font-size: 80px;
}

h2 {
    font-size: 58px;
    margin: 18px 0 -12px;
}

dd {
    float: left;
    margin-left: 0;
}

dt {
    float: left;
    clear: both;
}
dd:before {
    content: ':';
    font-weight: bold;
    margin-right: 8px;
}

.block {
    overflow: hidden;
    max-width:     1280px;
    margin: 0 auto;
    /*border-left: 1px solid #888;
    border-right: 1px solid #888;*/
    min-height: 100%;
    background-color: #eee;
    /*box-shadow: 0 0 15px #666;*/
}

.header {
    background: url(http://i.imgur.com/AccM7.jpg) repeat-x;
    background-size: 128px;
    /*image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode:nearest-neighbor;*/
    height: 128px;
    box-shadow: 0px 0px 40px #333;
    margin: 0 0 40px;
}

.info {
    border-bottom: 1px solid #aaa;
    overflow: auto;
    margin: 0 32px;
    padding-bottom: 40px;
}

.info dl {
    margin: 0;
    float: left;
}

.info img {
    float: left;
    margin: 28px 80px 0 8px;
}

.blockId {
    float: right;
    color: #aaa;
    /*margin-right: 38px;*/
}
.content {
    border-bottom: 1px solid #aaa;
    margin: 26px 32px 5px;    
    padding-bottom: 5px;
}
p {
    margin: 15px 0 0;
}

.sideImg {
    float: right;
    text-align: center;
    color: #666;
}

.sideImg img{
    max-width: 580px;
    display: block;
    margin: 15px 10px 8px;
}

#nav {
    text-align: center;
    color: #666;
}

#nav a {
   ...