JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8;charset=utf-8">
      <link type="text/css" rel="stylesheet" href="outline.css">
    </head>
   <body class="frame">

<div class="content">
   <table id="viewbox">
      <thead>
         <tr>
            <td class="viewbox-thead">
               <div class="viewbox-thead-box">
                  <div>
                     <table style="margin-left:15px;">
                        <tr>
                           <td>
                              <h3>Документы - Операции</h3>
                           </td>
                        </tr>
                        <tr>
                           <td>
                              <div class="time">Обновлено:&nbsp;27-06-2011 17:14:35</div>
                              <div class="time">Страница:&nbsp; 1   &nbsp; из &nbsp; 2&nbsp; Документов: 31</div>
                           </td>
                        </tr>
                     </table>
                     <table style="margin-top:5px;">
                        <tr>
                           <td><a href="javascript:updateView('view','operations',1)"><font style="font-weight:bold;font-size:1.3em">1</font></a>&nbsp;
                                                      
                           </td>
                           <td><a href="javascript:updateView('view','operations',2)"><font style="font-size:12px">2</font></a>&nbsp;
                                                      
                           </td>
                           <td><a href="javascript:updateView('view','operations',2)"><font style="font-size:12px"> &gt; </font></a>&nbsp;
                                                      
                           </td>
                           <td><a href="javascript:updateView('view','operations',2)"><font style="font-size:12px"> &gt;&gt; </font></a>&nbsp;
                                                      
                         ...

CSS

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

.frame {
    background-color: #FFF;
}

.viewtable img {
    max-width: 20px;
    margin: 0 2px 0 1px;
}

.viewtitle td {
    padding: 2px;
}

.viewtable td {
    padding: 2px;
}

.viewtable .notread td {
    font-weight: bold;
}

.viewtable .ctrldate {
    text-align: center;
}

.viewtable .notread .ctrldate {
    font-size: 98%;
}

.viewtitle .th td {
    font-weight: bold;
}

.viewtable .thcell {
    padding: 4px 0;
}

.viewtable .num {
    width: 5%;
    height: 25;
    text-align: center;
    font-color: #CCCCCC;
    border-right: 1px solid gray;
}

.viewtable .vn {
    width: 7%;
    text-align: left;
}

.viewtable .dvn {
    width: 14%;
    text-align: center;
}

.viewtable .exec {
    width: 15%;
    text-align: left;
}

.viewtable .briefc {
    width: 30%;
    text-align: left;
}

.viewtable .apps {
    width: 20%;
    text-align: left;
}

/* */
div.Node * {
    vertical-align: middle;
}

div.Node a:hover {
    text-decoration: underline;
}

.viewcattr td {
    color: #000;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #FFF;
    border-bottom: 1px solid #EFEFEF;
    margin: 0px;
    margin-top: 1px;
    padding: 0px;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
}

.viewcattr .count {
    margin-left:5px;
    font-size:90%;
    font-weight:normal;
}


#viewbox {
    position: absolute;
    height: 100%;
    width: 100%
}
#viewbox .viewbox-thead {
    height: 10px;
}
#viewbox .viewbox-thead-box {
    border: none;
    padding: 2px;
}
#viewbox .viewbox-tfoot {
    height: 10px;
}
#viewbox .viewbox-tfoot-box {
    background-color: #FFEAC9;
    border-top: 1px solid #FFDEAD;
    border-left: 1px solid #FFDEAD;
    padding: 2px;
}
#viewbox .viewbox-viewtitle {
    height: 26px;
    vertical-align: middle;
}
#viewbox .viewbox-viewtable {
    background-color: #FFF;
    position: relative;
    vertical-align: top;
}
#viewbox .viewtitle {
    background-color:...