JSFiddle - React, Tailwind, and code Playground

Dashboard Blocks for TimeZone V.3

by Jennifer Perrin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<section class="tzBlocks">
    <div class="solid-bg">
        <div class="container">
            
            <div class="row clearfix">
                <div class="col-md-4 blockCont">
                    <span class="iconCont"><i class="fa fa-envelope-o"></i></span>
                    <span class="txtCont">1</span>
                    <hr />
                    <span class="titleCont">Unread Message</span>
                </div>
                
                <div class="col-md-4 blockCont">
                    <span class="iconCont"><i class="fa fa-clock-o"></i></span>
                    <span class="txtCont">32.5</span>
                    <hr />
                    <span class="titleCont">Hour this Week</span>
                </div>
                
                <div class="col-md-4 blockCont">
                    <span class="iconCont"><i class="fa fa-calendar"></i></span>
                    <span class="txtCont">Out</span>
                    <hr />
                    <span class="titleCont">Your Status</span>
                </div>
            </div>
            
        </div>
    </div>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body { font-family: 'Lato', sans-serif; }

.tzBlocks {
    background: rgba(0, 0, 0, 0) url("../img/bg-01.jpg") no-repeat fixed 0 0 / cover ;
    color: #fff;
}
.tzBlocks .solid-bg {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    padding: 100px 0;
    text-align: center;
}
.tzBlocks .blockCont {
    padding-bottom: 20px;
    padding-top: 20px;
}
.tzBlocks .iconCont {
    background: rgba(30, 159, 180, 0.3) none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    display: inline-table;
    font-size: 48px;
    height: 90px;
    line-height: 30px;
    margin-bottom: 20px;
    padding-top: 22px;
    text-align: center;
    width: 90px;
}
.tzBlocks .txtCont {
    display: block;
    font-size: 90px;
    font-weight: 400;
    line-height: 80px;
}
.tzBlocks hr {
    background: rgba(30, 159, 180, 0.3) none repeat scroll 0 0;
    border: 0 none;
    display: inline-table;
    height: 2px;
    margin: 10px 0 15px;
    padding: 0;
    width: 160px;
}
.tzBlocks .titleCont {
    display: block;
    font-size: 18px;
    font-weight: 300;
    text-transform: uppercase;
}

JavaScript

// Bootstrap 3.3.5
// Fontawesome 4.3.0