JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://www.chartjs.org/assets/Chart.js"></script>
<div class="container">
    <div class="row">
        <div class="one-fourth">
            <div class="panel white">
                <div class="top clear"> <span class="sub">Today</span>
 <a href="#" class="settings"><i class="icon-moon"></i></a>

                </div>
                <div class="inner">
                     <h2>12:42<small>pm</small></h2>

                    <p>Monday / March 5 / 2013</p>
                </div>
                <div class="bottom clear"> <span class="sub">Los Angeles, CA</span>
 <a href="#" class="settings"><i class="icon-gear"></i></a>

                </div>
            </div>
        </div>
        <div class="one-half">
            <div class="panel background"> <a href="#" class="large-square">GHOST</a>

            </div>
        </div>
        <div class="one-fourth">
            <div class="panel white">
                <div class="top clear"> <span class="sub">Subscriptions</span>
                </div>
                <div class="inner">
                     <h2>29,301</h2>

                    <p><span class="positive">+104</span> subscribers this month</p>
                </div>
                <div class="bottom clear"> <span class="sub">RSS</span>
 <a href="#" class="settings"><i class="icon-gear"></i></a>

                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="one-half">
            <div class="panel white tall">
                <div class="top clear"> <span class="sub">Impressions</span>

                </div>
                <div class="inner">
                     <canvas id="views" width="540" height="400"></canvas>
                </div>
                <div class="bottom clear"> <span class="sub">Today</span>
                    <a href="#" class="settings"><i...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 700, 800);
 body {
    color: #242628;
    background: #EDECE4;
    font-family:'Open Sans', sans-serif;
    cursor: default;
    padding-bottom: 100px;
}
.container {
    margin: 0 auto;
    width: 1100px;
}
.white {
    background: #fff;
}
.row:after, .clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
.one-fourth, .one-half, .one-third, .whole {
    float: left;
    display: inline-block;
    margin-right: 20px;
    min-height: 25px;
    min-width: 25px;
}
.one-fourth {
    width: 260px;
}
.one-third {
    width: 353px;
}
.one-half {
    width: 540px;
}
.whole {
    width: 100%;
}
.row :last-child {
    margin-right: 0;
}
.sub-row .one-fourth {
    margin-right: 0;
}
.sub-row .one-fourth:nth-child(odd) {
    margin-right: 20px;
}
.panel {
    min-height: 230px;
    outline: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    margin-top: 20px;
}
.panel.dark {
    background: #2c3033;
    color: #eee;
}
.panel.dark .top, .panel.dark .bottom {
    color: #757d7f;
}
.panel.dark .top {
    border-bottom: 1px solid #444;
}
.panel .top .sub, .panel .bottom .sub {
    text-transform: uppercase;
}
.panel.dark .top .sub {
    padding: 8px 10px;
}
.panel.tall {
    height: 480px;
}
.panel.background {
    background: url(http://i.imgur.com/zU7lTmA.jpg) center center no-repeat;
    background-size: cover;
    text-align: center;
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
}
.panel.background a.large-square {
    display: inline-block;
    font-size: 76px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    border: 8px solid #FFF;
    line-height: 80px;
    padding: 3px 28px 6px 18px;
    margin-top: 50px;
}
.panel.background a.large-square:hover {
    opacity: 0.8;
}
.panel .inner {
    padding: 10px;
    height: 100%;
}
.panel .bottom {
    position: absolute;
    bottom:...

JavaScript

(function (w, d) {

    var lineCtx = document.getElementById("views").getContext("2d"),
        donoughtCtx = document.getElementById("browsers").getContext("2d"),
        lineChart = new Chart(lineCtx).Bar({
            labels: ['', '', '', '', '','', '', '', '', '','', '', '', '', '','', '', '', '', ''],
            datasets: [{
                fillColor: "#ebebe3",
                strokeColor: "#bfbfb5",
                pointColor: "#fff",
                pointStrokeColor: "#bfbfb5",
                data: [10,15,20,25,30,35,40,45,50,40,35,25,30,35,40,55,70,65,60,50]
            }]
        }, {
            animation : false,
            scaleShowLabels: false,
            scaleShowGridLines: false,
            bezierCurve: false
        }),
        donutChart = new Chart(donoughtCtx).Doughnut([
				{ value: 30, color:"#F7464A" },
				{ value: 50, color : "#46BFBD" },
				{ value: 100, color : "#FDB45C" },
				{ value: 40, color : "#949FB1" },
				{ value: 120, color : "#4D5360" }
			
		]);


})(window, document);