JSFiddle - React, Tailwind, and code Playground

by manishvaja1

HTML

<body>
<div id="header"> 
    <div id="headerTop">
        <div class="logo1"></div>
        <div class="logo2">Logo 1</div>
        <div class="logo3"> <br/>date and time</div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>
<div class="headerRow1"></div>
<div class="serverRow">Header</div>
<div class="headerRow1"></div>
<table>
<colgroup><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/><col/></colgroup>
<tr><th>test1</th><th>test2</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th><th>test3</th></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><tddata17</td><td style="background:tomato;">data</td><td>data</td><td>data</td><td style="background:#00ff00;">data</td></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><tddata17</td><td style="background:tomato;">data</td><td>data</td><td>data</td><td style="background:#00ff00;">data</td></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><tddata17</td><td style="background:tomato;">data</td><td>data</td><td>data</td><td style="background:#00ff00;">data</td></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><tddata17</td><td style="background:tomato;">data</td><td>data</td><td>data</td><td style="background:#00ff00;">data</td></tr>
<tr><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><td>data</td><tddata17</td><td style="background:tomato;">data</td><td>data</td><td>data</td><td...

CSS

style> html body {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  height: 100%;
  margin: 0;
}

#header {
  background: #0066a1;
  color: #ffffff;
  width: 100%
}

#headerTop {
  padding: 10px;
}

.logo1 {
  float: left;
  font-size: 25px;
  font-weight: bold;
  padding: 0 7px 0 0;
}

.logo2 {
  float: left;
  font-size: 25px;
}

.logo3 {
  float: right;
  font-size: 12px;
  text-align: right;
}

.headerRow1 {
  background: #66a3c7;
  height: 10px;
}

.serverRow {
  background: #000000;
  color: #ffffff;
  font-size: 32px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
}

.sectionRow {
  background: #0066a1;
  color: #ffffff;
  font-size: 13px;
  padding: 1px 5px!important;
  font-weight: bold;
  height: 15px!important;
}

table {
  background: #eaebec;
  border: #cccccc 1px solid;
  border-collapse: collapse;
  margin: 0;
  width: 100%;
}

table th {
  background: #ededed;
  border-top: 1px solid #fafafa;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 2px 2px;
  text-transform: capitalize;
  position: fixed
}

table tr {
  text-align: center;
  font-size: 13px;
}

table td {
  background: #fafafa;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  padding: 2px 2px;
  font-size: 11px;
}

table td:first-child {
  text-align: left;
}

table tr:last-child td {
  border-bottom: 0;
}

table tr:hover td {
  background: #f2f2f2;
}

table tr:hover td.sectionRow {
  background: #0066a1;
}

</style