JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<div class="box-mod">
    <div class="box-mod head"><h1>Pipeline Projects</h1> Tracking all planned and newly active crude oil pipeline projects across North America.</div>
</div>
<div class="box-mod">
    <h1>Crude-by-Rail</h1> Coverage of all planned and operating rail facilities in North America.
</div>

CSS

body {
    background-color: #fefefe;
    padding: 1em;
    font-family:helvetica,arial,sans-serif;
}
.box-mod {
    padding: 2em;
    width: 16em;
    height: 14em;
    position: relative;
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 10px;
    margin: 5px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 250px;
}
.box-mod:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}

.box-mod.head {
    padding: 2em;
    width: 99%;
    height: 4em;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 1px solid #cccccc;
    position: relative;
    background: none repeat scroll 0 0 #eeeeee;
    color: #333333;
    margin: -31px;
}

.box-mod h1 {
    font-size:28px;
}