JSFiddle - React, Tailwind, and code Playground

by Md.Sifatul Islam

HTML

<table id="reTable" class="to" dir="ltr" style="width:100%">
            <tr cellspacing="0">

                <th cellpadding="0">10</th>
                <th>9</th>
                <th>87</th>
                <th>7</th>
                <th>6</th>
                <th>5</th>
                <th>4</th>
                <th>343</th>
                <th>2</th>
                <th>1</th>
                <th>(1)1</th>
            </tr>
          

         
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>x</td>
                <td>1</td>
                <td>x</td>
                <td>2</td>
                <td>1</td>
                <td>x</td>
                <td>4(1)</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>x</td>
                <td>1</td>
                <td>x</td>
                <td>1</td>
                <td>x</td>
                <td>1</td>
                <td>5(1)</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>1</td>
                <td>x</td>
                <td>x</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>6(1)</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>x</td>
                <td>1</td>
                <td>x</td>
                <td>2</td>
                <td>x</td>
                <td>7(1)</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>2</td>
                <td>x</td>
                <td>1</td>
               ...

CSS

body {
    margin: 0;
    padding: 30px;
    font-family: 'Source Sans Pro', sans-serif;
    direction: rtl;
    background-color:#000;
}

table {
    width: 85%;
    margin: 0 auto;
    /*transform: scale(0.9);*/
    max-height: 400px;
    border-collapse: collapse;
}

    table th {
        color: #9ebbf3;
        height: 0.3%;
        background: linear-gradient(to bottom, rgba(57,71,82,0.4) 0%,rgba(40, 40, 52, 0.31) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3394752', endColorstr='#d6282834',GradientType=0 );
    }

    table td {
        font-size: 14px;
        color: #fff;
        text-align: center;
        max-height: 20px;
        direction: rtl;
    }

    table th, td {
        padding: 7px;
    }

        table tr td:last-child {
            color: #ffdf32;
        }

               table tr th:last-child {
            color: #ffdf32;
            font-weight:500;
        }

table.to th, td {
    padding: 0;
}

  table.to th {
        color: #ffdf32 !important;
        font-weight: 500 !important;
         overflow: hidden;
        max-width: 4px; //use max width as you prefer
    }

table tr {
    border:none!important;
}

table td {
    border-left: 1px solid;
    max-height: 20px;
    border-color: #425559;
}