JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<table>
    <tfoot>
        <tr>
            <td>= 42</td>
        </tr>
    </tfoot>
    <tbody>                
        <tr>
            <td>18</td>
        </tr>
        <tr>
            <td>+ 22</td>
        </tr>
        <tr>
            <td>+ 2</td>
        </tr>
    </tbody>
</table>

CSS

td
{
    text-align: right;
    padding: 0.5em 20px 0.5em 100px;
}
tbody tr:last-child td
{
    border-bottom: 1px solid #000;
}
.js tbody
{
    display: none;
}
.active tbody
{
    display: table-row-group;
}
table
{
    background-color: #FAFAFA;
}
a
{
    position: relative;
    text-decoration: none;
    color: #000;
    display: inline-block;
}
a::before
{
    content: '▼';
    position: absolute;
    color: #DADADA;
    left: 20px;
    top:  0.5em;
}
a.active::before
{
    content: '▲';
}
body
{
    font-size: 3em;
}

JavaScript

jQuery(function(){
    jQuery('html').addClass('js');
    jQuery('table').wrap('<a href="#"></a>');
    jQuery('a').on('click', function(e){
        e.preventDefault();
        jQuery(this).toggleClass('active');
    });
});