JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="row headerTable">
    <div class="col-md-2 col-xs-2">Name</div>
    <div class="col-md-2 col-xs-2">Obligations</div>
    <div class="col-md-1 col-xs-1">Type</div>
    <div class="col-md-2 col-xs-2">Group</div>
    <div class="col-md-2 col-xs-2">Entities</div>
    <div class="col-md-2 col-xs-2">Owner</div>
    <div class="col-md-1 col-xs-1">&nbsp;</div>
</div>
<div class="bodyTable">
    <div class="col-md-2 col-xs-2 spacer">Found Factsheets</div>
    <div class="col-md-2 col-xs-2">6</div>
    <div class="col-md-1 col-xs-1">Manual</div>
    <div class="col-md-2 col-xs-2 spacer">Quarterly Reporting</div>
    <div class="col-md-2 col-xs-2 spacer">Date, Account A</div>
    <div class="col-md-2 col-xs-2 spacer">Daniel Forbes</div>
    <div class="col-md-1 col-xs-1"> <span class="glyphicon glyphicon-comment comment"></span>
 <span class="glyphicon glyphicon-chevron-left pull-right iconAjust" data-toggle="collapse" data-target="#row1"></span>
    </div>
</div>

<div id="row1" class="collapse contBodyTable">
    <div class="col-xs-6">
        <div class="panel panel-default">
            <div class="panel-body"> <span class="glyphicon glyphicon-comment pull-right comment"></span>

                <div class="title spacer">
                    <div class="status"><span class="glyphicon glyphicon-ok green"></span>

                    </div>Quarterly Reporting (2012.10.23 18:57)</div>
                <div class="middle">
                    <div class="col-xs-5"><span class="glyphicon glyphicon-user"></span> Daniel Forbes</div>
                    <div class="col-xs-4"><span class="glyphicon glyphicon-calendar"></span> 12 Jul 2015</div>
                    <div class="col-xs-3"><span>Nº Tasks</span> 5</div>
                </div>
                <div class="middle">
                    <div class="col-xs-12 spacer"><span>Entities:</span> Date = 31 May 2015, Account A</div>
                </div>
                <div class="footer">
                    <div...

CSS

body {
    margin:30px;
    font-family:'century gothic';
    color: #6F6F6F;
}
.col-xs-4,col-md-4,.col-xs-3,col-md-3,.col-xs-2,col-md-2{
    padding-right:5px!important;
}
.title {
    font-weight:700;
}
.footer {
    font-size:10px;
}
.right {
    text-align:right;
}
.footer div span {
    font-weight:700;
}
.middle div span {
    font-weight:700;
}
.middle {
    font-size:12px;
}
.status {
    float:left;
}
.spacer {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.green {
    color:green;
    margin-right:5px;
}
.red {
    color:red;
    margin-right:5px;
}
.comment {
    color: #E4C00D;
}
.headerTable {
    font-weight:700;
    border-bottom: 2px solid #e3e3e3;
    margin-bottom:5px;
}
.bodyTable{
    width:100%;
    display:inline-block;
    border-bottom:1px solid #e3e3e3;
    
}
.bodyTable div{
    line-height:25px;
    margin-top:-5px;
}
.contBodyTable .panel{
    margin-bottom: 5px;
}
.contBodyTable {
  padding: 5px;
  border-bottom: 1px solid #e3e3e3;
}
.iconAjust{
 margin-top:3px;   
}
.panel:hover{
    background-color:#EDEDED;;
}
.collapse.in {
  display: inline-block;
}