JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<div class="module">
    <div class="module-head">CrudeHub Features</div>
    <div class="module-body">
<div class="box-mod"><div class="box-mod head inb"><h1>Infobase</h1><span class="box-sub">North American Crude Study 2014<br>Digital Access.</span></div></div>
    
    <div class="box-mod">
    <div class="box-mod head pipe"><h1>Pipeline Projects</h1><span class="box-sub">Tracking all planned and newly active crude oil pipeline projects in NA.</span></div></div>
 
    <div class="box-mod"><div class="box-mod head rail"><h1>Crude-by-Rail</h1><span class="box-sub">Coverage of all planned and operating rail facilities in North America.</span></div></div>
    
<div class="box-mod">
    <div class="box-mod head prd"><h1>Production</h1><span class="box-sub">Coverage of all planned and operating rail facilities in North America.</span><span class="badge">26</span>
</div></div>
    
    <div class="box-mod"><div class="box-mod head bln">
    <h1>Balances</h1><span class="box-sub">Coverage of all planned and operating rail facilities in North America.</span>
    </div></div>
    
    <div class="box-mod ref"><div class="box-mod head ref">
    <h1>Refining</h1><span class="box-sub">Coverage of all planned and operating rail facilities in North America.</span>
    </div>
        
    </div>
</div>

CSS

body {
    background-color: #eeeeee;
    padding: 1em;
    font-family:helvetica,arial,sans-serif;
}

.box-mod-env {
    width: 230px;
}

.box-mod, .box-mod.ref {
    padding: 2em;
    width: 16em;
    height: 14em;
    position: relative;
    display:inline-block;
    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: 230px;
}

.box-mod:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}

.box-mod.ref:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    background-image:url('http://crudehub.com/wp-content/media/2014/04/refinery.jpg');
    background-position:bottom center;
    box-shadow: 0 0 1px 1px #333333 inset;
    color: #222222;
    cursor: pointer;
}

.box-mod.head {
    padding: 1em 2em 1.5em 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.head:hover {
    background-color: #111111;
  background-image: -moz-linear-gradient(top, #444444, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#111111));
  background-image: -webkit-linear-gradient(top, #444444, #111111);
  background-image: -o-linear-gradient(top, #444444, #111111);
  background-image: linear-gradient(to bottom, #444444, #111111);
    color:#ffffff;
    text-shadow:none;
}

.box-mod.foot {
    width:80%;
    height: 20px;
    padding:5px 25px;
    border-bottom:none;
    border-left:none;
    border-right:none;
    border-top: 1px solid #cccccc;
    background: none repeat scroll 0 0 #eeeeee;
    color: #333333;
   ...