JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<div class="module">
    <div class="module-head">CrudeHub Features</div>
    <div class="module-body"> 

   <section class="widget">
    <div class="widget-heading">
      <h3 class="widget-title">Production</h3>
    </div>

    <ul class="widget-toolbar wprd">
      <li><a href="index.html">Latest updates</a></li>
      <li><span class="badge">4</span></li>
    </ul>

    <ul class="ch-features">
      <li class="featurebox featurebox-active">
        <span class="icon-psd-40 featurebox-icon"></span>
        <h4 class="featurebox-name">ConocoPhillips raises estimates on Eagle Ford recoverable resources, production<p class="featurebox-info">Updated Apr 12, 2014</p></h4><p class="featurebox-info">Updated Apr 12, 2014</p>
      </li>
        <li class="featurebox featurebox-active">
        <span class="icon-psd-40 featurebox-icon"></span>
        <h4 class="featurebox-name">Abraxas unloads Permian Basin assets for $2.5 million</h4>
            <p class="featurebox-info">Updated Apr 12, 2014</p>
      </li>
      <li class="featurebox">
        <span class="icon-ai-24 featurebox-icon"></span>
        <h4 class="featurebox-name">Basins</h4>
      </li>
      <li class="featurebox">
        <span class="icon-ai-24 featurebox-icon"></span>
        <h4 class="download-name">Map</h4>
      </li>
        <li class="featurebox">
        <span class="icon-ai-24 featurebox-icon"></span>
        <h4 class="featurebox-name">Metrics</h4>
      </li>
        <li class="featurebox">
        <span class="icon-ai-24 featurebox-icon"></span>
        <h4 class="featurebox-name">Analysis</h4>
      </li>
    </ul>
  </section>        
        
        
<section class="widget">
    <div class="widget-heading">
      <h3 class="widget-title">Pipelines</h3>
      <a href="index.html" class="widget-close"><span class="icon-close">Close</span></a>
    </div>

    <ul class="widget-toolbar wpipe">
      <li><a href="index.html">Latest project updates</a></li>
      <li><a...

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;
   ...