JSFiddle - React, Tailwind, and code Playground

by akaimo

HTML

<section class="chwidget">
    <div class="chwidget-heading">
      <h3 class="chwidget-title">Asset Name</h3>
        <a href="index.html" class="chwidget-close"><span class="icon-close">view</span></a>
    </div>

    <ul class="chwidget-toolbar wprd">
      <li><a href="index.html">City, ST</a></li>
      <li><span class="badge">2</span></li>
    </ul>

    <ul class="ch-features">
      <li class="featurebox featurebox-active">
        <span class="featurebox-name">Permian Basin Crude & WTI vs Lighter Crude/Condensate Production</span><p class="featurebox-info">May 18, 2014</p>
      </li>
        <li class="featurebox featurebox-active">
        <h4 class="featurebox-name">Gulf Coast Gasoline Exports, Spot Gasoline Clearing Prices and Margin Impacts</h4>
            <p class="featurebox-info">May 16, 2014</p>
      </li>
        <li class="featurebox featurebox-active">
        <h4 class="featurebox-name">Eagle Ford Crude and Cushing Inventory Shift: Tipping Point for Gulf Coast Light Crude Supply Length and Pricing</h4>
            <p class="featurebox-info">May 13, 2014</p>
      </li>
      <li class="featurebox">
        <h4 class="featurebox-name sub"><a href="#">Go to News &amp; Analysis</a></h4>
      </li>
    </ul>
  </section>

CSS

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

.chwidget {
  margin: 0 12px 12px 0;
  width: 300px;
  overflow: hidden;
  position: relative;
  display:inline-block;
  background: #fafafa;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.chwidget-heading {
  position: relative;
  z-index: 2;
  padding: 14px 8px;
  height: 24px;
  background: #eee;
  border-radius: 4px 4px 0 0;
  background-image: -webkit-linear-gradient(top, #eeeeee, #d8d8d8);
  background-image: -moz-linear-gradient(top, #eeeeee, #d8d8d8);
  background-image: -o-linear-gradient(top, #eeeeee, #d8d8d8);
  background-image: linear-gradient(to bottom, #eeeeee, #d8d8d8);
  -webkit-box-shadow: inset 0 21px rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 27px rgba(255, 255, 255, 0.22);
}

.chwidget-title {
  float: left;
  line-height: 24px;
  padding: 0 4px;
  font-size: 18px;
  font-weight: bold;
  color: #666666;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

.chwidget-close {
  float: right;
  margin: 0 1px 0 10px;
  padding: 3px 3px 3px 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3);
}
.chwidget-close:hover {
  border-color: rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
.chwidget-close:active {
  background-color: rgba(0, 0, 0, 0.02);
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

.chwidget-toolbar {
  position: relative;
  height: 18px;
  line-height: 18px;
  padding: 6px 0;
  background: #5c5c5c;
  background-image: -webkit-linear-gradient(top, #878787, #5c5c5c);
  background-image: -moz-linear-gradient(top, #878787, #5c5c5c);
  background-image: -o-linear-gradient(top, #878787, #5c5c5c);
  background-image:...