JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<body>
        <div class="full-page-wrapper">
            <div class="container container-grid">

                <div class="row">
                    <div class="col-md-4">
                        <div class="widget widget-chart">
                            <div class="widget-header">
                                <h5>Socioeconomic: Wealthy and Performance: High</h5>
                            </div>
                            <div class="widget-body">
                                <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
                            </div>
                            <div class="widget-footer">
                                <p>This is some footer content.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="widget widget-chart">
                            <div class="widget-header">
                                <h5>Socioeconomic: Middle Class and Performance: High</h5>
                            </div>
                            <div class="widget-body">
                                <img src="http://www.mathgoodies.com/lessons/graphs/images/line_example1.jpg" />
                            </div>
                            <div class="widget-footer">
                                <p>This is some footer content.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="widget widget-chart">
                            <div class="widget-header">
                                <h5>Socioeconomic: Poor and Performance: High</h5>
                            </div>
         ...

CSS

/* Full Page Responsive Layout */
html, body, .full-page-wrapper{
    width: 100%;
    height: 100%;
}

/* Grid View */
.container.container-grid{
    height: 100%;
    padding-bottom: 0px !important;
}
.container.container-grid .row{
    height: 33%;
}
.container.container-grid .row > div{
    border: 1px solid #2866a4;
    height: 100% !important;
}
.container.container-grid .row > div img{
    width: 100%;
    height: 100%;
}

/* Widgets */
.widget{
    height: 100%;
    width: 100%;
}
.widget .widget-header h4{
}
.widget .widget-body{
    width: 100%;
    height: auto;
}
.widget .widget-body img{
    height: 100%;
}
.widget .widget-footer{

}