JSFiddle - React, Tailwind, and code Playground
by Alex
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="jumbotron emotion">
<div class="container">
<div class="row">
<div class="search col-md-6 col-md-offset-3">
<h2>Search the climate<span>base</span></h2>
<div class="details container-fluid" id="details">
<div class="row" data-bind="offset-project">
<div class="col-md-6">
<h3 data-bind="name">Name</h3>
</div>
<div class="col-md-3 text-uppercase">
<h3><small data-bind="id">ID</small></h3>
</div>
<div class="col-md-3 text-uppercase">
<span class="label label-success" data-bind="standard">Standard</span>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-6"><h3><span data-bind="quantity"></span>123 t</h3></div>
<div class="col-md-6"><h3><small data-bind="vintage"></small>2014</h3></div>
</div>
<div class="row">
<div class="col-md-4" data-bind="humanDate"></div>
<div data-bind="links">
<div class="col-md-4" data-bind="markit"></div>
<div class="col-md-4" data-bind="natureoffice"></div>
</div>
</div>
<div class="row" data-bind="customer" id="customer">
<div class="col-md-6" data-bind="name"></div>
<div class="col-md-6" data-bind="usecase"></div>
</div>
<div class="row">
<div class="col-md-12" data-bind="note"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
div.col-md-6,div.col-md-3{
background-color:#ddd;
padding-top:0px;
}
div.col-md-6:after,
div.col-md-3:after{
content:"texterververv";
text-transform:upper-case;
font-size:0.8em;
background-color:#f2ede5;
color:#424242;
padding-left:6px;
padding-top:4px;
padding-right:4px;
padding-bottom:4px;
border-bottom-right-radius: 6px;
position:absolute;
top:0px;
left:0px;
}