JSFiddle - React, Tailwind, and code Playground

HTML

<div class="application-container xvalidate-history" style="max-height: 922px;">
    <div class="history-header">
        <div title="xValidate History" class="application-header" id="historyHeader">History <span></span>
        </div>
    </div>
    <div class="application-list-container" id="historyContainer" style="max-height: 728px;">
        <div class="histrory-date">06/03/2014</div>
        <ul class="xValidate-history-row " name="history-task" status="Failed" taskid="3755151">
            <li class="color:red;" style="color: red;">16:36:14</li>
            <li class="histroy-username color:red;" style="color: red;">SYSTEM</li>
            <li class="color:red;" style="color: red;">Failed</li>
            <li class="xvalidate-mail-icon mail-success" style="display: none;"></li>
        </ul>
        <ul class="xValidate-history-row " name="history-task" status="Failed" taskid="3754313">
            <li class="color:red;" style="color: red;">15:35:08</li>
            <li class="histroy-username color:red;" style="color: red;">SYSTEM</li>
            <li class="color:red;" style="color: red;">Failed</li>
            <li class="xvalidate-mail-icon mail-success" style="display: none;"></li>
        </ul>
        <ul class="xValidate-history-row " name="history-task" status="Failed" taskid="3753478">
            <li class="color:red;" style="color: red;">14:34:23</li>
            <li class="histroy-username color:red;" style="color: red;">SYSTEM</li>
            <li class="color:red;" style="color: red;">Failed</li>
            <li class="xvalidate-mail-icon mail-success" style="display: none;"></li>
        </ul>
        <ul class="xValidate-history-row " name="history-task" status="Failed" taskid="3752647">
            <li class="color:red;" style="color: red;">13:33:06</li>
            <li class="histroy-username color:red;" style="color: red;">SYSTEM</li>
            <li class="color:red;" style="color: red;">Failed</li>
            <li...

CSS

div.application-container {
    margin-top: 10px;
    margin-left: 8px;
    margin-right: auto;
    vertical-align: bottom;
    font-size: 19px;
    border: 1px solid #fcb333;
    width: 402px;
    max-height: 227px;
    color: #000000;
    margin-bottom: 5px;
}
.history-header {
    background-color: #FDE6BE;
}
div.application-header {
    background-color: #fde6be;
    height: 43px;
    padding-left: 10px;
    width: 382px;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 43px;
    padding-right: 10px;
    display: inlline-block;
}
div.application-list-container {
    height: auto;
    margin-bottom: 10px;
    min-height: 45px;
    overflow: auto;
    max-height: 169px;
    position: relative;
}
.application-list-container div.histrory-date {
    background-color: #FEF0D6;
    height: 25px;
    padding-top: 7px;
    padding-left: 13px;
    font-size: 13px;
}
.application-list-container ul {
    font-size: 13px;
    text-indent: 2px;
}
.application-list-container li {
    display: inline-block;
    margin-top: 5px;
    text-align: center;
    vertical-align: top;
    width: 24%;
    margin-bottom: 8px;
}
.application-list-container li.histroy-username {
    overflow: hidden;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    width: 44%;
}