9BoxEmpEval

HTML

<link rel="stylesheet" href="//cdn.foundation5.zurb.com/foundation.css">
<body>
    <div class="wrapper">
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>1C</h2>
                <p>Rough Diamond</p>
                <hr />
                <p>Poor Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1B</h2>
                <p>Future Star</p>
                <hr />
                <p>Good Performance<br/>High Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>1A</h2>
                <p>Consistent Star</p>
                <hr />
                <p>Outstanding Performance<br/>High Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2C</h2>
                <p>Inconsistent Player</p>
                <hr />
                <p>Poor Performance<br/>Moderate Potential (new role)</p>
            </div>
            <div class="small-12 medium-4 large-4 columns yellow_gradient">
                <h2>2B</h2>
                <p>Key Player</p>
                <hr />
                <p>Good Performance<br/>Moderate Potential</p>
            </div>
            <div class="small-12 medium-4 large-4 columns green_gradient">
                <h2>2A</h2>
                <p>Current Star</p>
                <hr />
                <p>Outstanding Performance<br/>Moderate Potential</p>
            </div>
        </div>
        <div class="row">
            <div class="small-12 medium-4 large-4 columns red_gradient">
                <h2>3C</h2>
                <p>Talent Risk</p>
                <hr />
                <p>Poor Performance<br/>Limited Potential</p>
            </div>
            <div class="small-12 medium-4 large-4...

CSS

.columns {
    border: 1px solid #000;
}
.green_gradient {
    background: linear-gradient(#00FF99, #009900);
}
.yellow_gradient {
    background: linear-gradient(#FFFF99, #999900);
}
.red_gradient {
    background: linear-gradient(#FF6666, #990000);
}

JavaScript

$(document).foundation();