JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<br />
<div class="row">
<div class="col-md-12">
<div class="alert alert-info">Alerts</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<h3 class="text-primary"><img width="60" height="60" data-name="" class="profile img-rounded" src="data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogcmdiKDE4OSwgMTk1LCAxOTkpOyB3aWR0aDogMTAwcHg7IGhlaWdodDogMTAwcHg7IGJvcmRlci1yYWRpdXM6IDBweDsiIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiBwb2ludGVyLWV2ZW50cz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCBzdHlsZT0iZm9udC13ZWlnaHQ6IDQwMDsgZm9udC1zaXplOiA2MHB4OyIgZm9udC1mYW1pbHk9IkhlbHZldGljYU5ldWUtTGlnaHQsSGVsdmV0aWNhIE5ldWUgTGlnaHQsSGVsdmV0aWNhIE5ldWUsSGVsdmV0aWNhLCBBcmlhbCxMdWNpZGEgR3JhbmRlLCBzYW5zLXNlcmlmIiBmaWxsPSIjZmZmZmZmIiBwb2ludGVyLWV2ZW50cz0iYXV0byIgZHk9IjAuMzVlbSIgeD0iNTAlIiB5PSI1MCUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkI8L3RleHQ+PC9zdmc+"> <span name="el_toolName">B - Tool Name</span> <small>#<span name="el_toolID">244</span></small></h3>
</div>
<div class="col-md-2"><span class="pull-right">Tool Status<br />(dates & replacement if applicable)</span></div>
</div>
<div class="row">
<div class="col-md-1"><span name="el_mainLink"><a target="_BLANK" href="#">Main Link</a></span></div>
</div>
<div class="row">
<div class="col-md-12"><span class="toolDescription" name="el_toolDescription">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat...
CSS
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
.panel-noMargin .panel{
margin-bottom: 0px;
}
.noMargin{
margin-bottom: 0px;
}
.page-header {
padding-bottom: 10px;
}
.toolDescription{
line-height: 25px;
}
.well.profile {
border: 0 none;
box-shadow: 0 0 0 rgba(0, 0, 0, 0) inset;
margin-bottom: 30px;
}
.ibox-content h1,
.ibox-content h2,
.ibox-content h3,
.ibox-content h4,
.ibox-content h5,
.ibox-title h1,
.ibox-title h2,
.ibox-title h3,
.ibox-title h4,
.ibox-title h5 {
margin-top: 5px;
}
.ibox {
clear: both;
margin-bottom: 25px;
margin-top: 0;
padding: 0;
}
.ibox:after,
.ibox:before {
display: table;
}
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 3px 0 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
min-height: 48px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0;
}
.ibox-content {
clear: both;
}
.ibox-heading {
background-color: #f3f6fb;
border-bottom: none;
}
.ibox-heading h3 {
font-weight: 200;
font-size: 24px;
}
.ibox-title h5 {
display: inline-block;
font-size: 14px;
margin: 0 0 7px;
padding: 0;
text-overflow: ellipsis;
float: left;
}
.m-r {
margin-right: 15px;
}