JSFiddle - React, Tailwind, and code Playground

Bootstrap Dashboard Info Blocks

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="dashblocks success">
                <div class="dashblocksBody">
                    <i class="boxIcon fa fa-comments"></i>
                    <span>13</span>
                </div>
                <div class="dashblocksFooter">New Comments</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="dashblocks primary">
                <div class="dashblocksBody">
                    <i class="boxIcon fa fa-tasks"></i>
                    <span>8</span>
                </div>
                <div class="dashblocksFooter">Outstanding Tasks</div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="dashblocks warning">
                <div class="dashblocksBody">
                    <i class="boxIcon fa fa-calendar"></i>
                    <span>2</span>
                </div>
                <div class="dashblocksFooter">Upcoming Events</div>
            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

html {
    margin-left: calc(100vw - 100%);
    overflow: auto;
}

body {
    padding: 20px 50px;
    font-family: "Dosis", sans-serif;
    background: #f0f0f0;
    color: #555555;
}

.dashblocks {
    color: #fff;
}
.dashblocks.default {
    border-color: #d9d9d9;
    background-image: linear-gradient(#ffffff, #f2f2f2);
}
.dashblocks.primary {
    border-color: #15405d;
    background-image: linear-gradient(#236b9b, #1e5d86);
}
.dashblocks.info {
    border-color: #287ab0;
    background-image: linear-gradient(#4da0d7, #3895d2);
}
.dashblocks.success {
    border-color: #4f8017;
    background-image: linear-gradient(#77c123, #6aab1f);
}
.dashblocks.warning {
    border-color: #9e770c;
    background-image: linear-gradient(#e5ad12, #cd9b10);
}
.dashblocks.danger {
    border-color: #913510;
    background-image: linear-gradient(#d64e18, #bf4615);
}
.dashblocks .dashblocksBody {
    font: 300 32px/38px "Open Sans",Arial,sans-serif;
    height: 60px;
    padding: 10px 20px;
    position: relative;
}
.dashblocks .dashblocksBody .boxIcon {
    color: #fff;
    font-size: 32px;
    position: absolute;
    right: 20px;
    top: 14px;
}
.dashblocks .dashblocksFooter {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    padding: 4px 20px;
}

@media (max-width:767px) {
	.dashblocks { margin-bottom: 10px; }
}

JavaScript

// Bootstrap v3.1.0
// Font Awesome 4.1.0