JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div id="main_container">
    <table>
        <tbody>
            <tr>
                <th>strategy</th>
                <th>symbol</th>
                <th>positionId</th>
                <th>pnlBP</th>
                <th>pnl</th>
                <th>pnlGbP</th>
                <th>costBP</th>
                <th>pnlG</th>
                <th>cost</th>
                <th>direction</th>
                <th>duration</th>
                <th>dLive</th>
                <th>%C</th>
                <th>%D</th>
                <th>time</th>
                <th>success</th>
                <th>turnover</th>
                <th>realV</th>
                <th>totalV</th>
                <th>real</th>
                <th>total</th>
                <th>realV</th>
                <th>totalV</th>
                <th>size</th>
                <th>filled</th>
                <th>open</th>
                <th>price</th>
                <th>turnover</th>
                <th>real</th>
                <th>total</th>
                <th>B1</th>
                <th>B2</th>
                <th>realV</th>
                <th>totalV</th>
                <th>size</th>
                <th>filled</th>
                <th>open</th>
                <th>price</th>
                <th>turnover</th>
                <th>real</th>
                <th>total</th>
                <th>flips</th>
            </tr>
            <tr>
                <td>open2</td>
                <td>E:CPI</td>
                <td>2</td>
                <td>-5.77</td>
                <td>-1.76</td>
                <td>-2.03</td>
                <td>3.74</td>
                <td>-0.62</td>
                <td>1.14</td>
                <td>B</td>
                <td>3</td>
                <td>0</td>
                <td>0</td>
                <td>0</td>
                <td>07:59:59</td>
                <td>0</td>
                <td>1525</td>
                <td>0</td>
                <td>72076.14</td>
               ...

CSS

th, td {
    text-align: center;
}
tr:nth-child(even) {
    background-color: #CACABF;
}
table th {
    background: #333 url(http://www.roscripts.com/images/llsh.gif) repeat-x;
    color : #fff;
}
table td {
    border-bottom: dotted 1px #333;
}
table {
    border-collapse:collapse;
    width: 100%;
}
#main_container {
    font-size: 9px;
    border: solid 3px #faa;
    background-color: rgba(245, 255, 10, 0.12);
    display: inline-block;
}
table tr {
    cursor: pointer;
    -webkit-transition: all 1s;
}
table tr:hover, tr.selected {
    color: #FFFF00;
    background: #000000;
    border: 1px solid #282828;
    box-shadow: -1px 1px 7px rgba(0, 0, 0, 0.75);
}