JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<article class="container">

    <section class="content-view-container">
        <div class="content-view-inner">
            <div class="row">
                <div class="span8 description-details-container">
                    <div class="thumb-container pull-left">
                        <div class="thumb-inner">
                            <img src="http://www.gravatar.com/avatar/1d7a80504fccf379e4299d7face1bfc3.png">
                        </div>
                    </div>
                    <div class="headline-container pull-left">
                        <div class="headline-inner">
                            <h1>Roland Groza</h1>
                            <h4>Frontend Developer</h4>
                        </div>
                    </div>
                </div>
                <div class="span4 contact-details-container">
                    <a href="tel:0045 29 84 11 04" class="clearfix contact-phone">
                        <span class="pull-left">0045 29 84 11 04</span>
                        <span class="pull-right"><i class="icon-phone"></i></span>
                    </a>
                    <a href="mailto:[email protected]" class="clearfix contact-email">
                        <span class="pull-left">[email protected]</span>
                        <span class="pull-right"><i class="icon-airplane"></i></span>
                    </a>
                </div>
            </div>
            <div class="row">
                <div class="span1">
                    <div class="info-button-container">
                        <div class="info-button-inner"><i class="icon-info"></i></div>
                    </div>
                </div>
                <div class="span11">
                    <div...

CSS

body {
    background: url("../gfx/pattern.png") center center repeat;
    background-attachment: fixed;
    font-family: "source-code-pro", sans-serif;

    .container {
        position: relative;
        height: 350px;
        margin-top: 100px;
        padding: 30px;
        background: url("../gfx/grid.png") center center repeat, url("../gfx/noise.png"), rgba(038, 173, 228, 1);
        background: -webkit-radial-gradient(center center, circle cover, rgba(255, 255, 255, 0.2) 0%, rgba(000, 000, 000, 0.4) 100%), url("../gfx/grid.png") center center repeat, url("../gfx/noise.png"), rgba(038, 173, 228, 1);    
        background: -moz-radial-gradient(center center, circle cover, rgba(255, 255, 255, 0.2) 0%, rgba(000, 000, 000, 0.4) 100%), url("../gfx/grid.png") center center repeat, url("../gfx/noise.png"), rgba(038, 173, 228, 1);
        background: -ms-radial-gradient(center center, circle cover, rgba(255, 255, 255, 0.2) 0%, rgba(000, 000, 000, 0.4) 100%), url("../gfx/grid.png") center center repeat, url("../gfx/noise.png"), rgba(038, 173, 228, 1);
        background: -o-radial-gradient(center center, circle cover, rgba(255, 255, 255, 0.2) 0%, rgba(000, 000, 000, 0.4) 100%), url("../gfx/grid.png") center center repeat, url("../gfx/noise.png"), rgba(038, 173, 228, 1);
        background: radial-gradient(center center, circle cover, rgba(255, 255, 255, 0.2) 0%, rgba(000, 000, 000, 0.4) 100%), url("../gfx/grid.png") center center repeat, url("../gfx/noise.png"), rgba(038, 173, 228, 1);
        -webkit-border-radius: 2px;
           -moz-border-radius: 2px;
                border-radius: 2px;
        -webkit-box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.4);
           -moz-box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.4);
                box-shadow: 0px 0px 4px rgba(000, 000, 000, 0.4);

        &:before {
            position: absolute;
            display: block;
            content: "";
            width: 100%;
            height: 410px;
            top: 0px;
  ...