JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Available tokens</h3>
<div class="token-tree">
    <h4 class="token-type"><a href="#">Current date</a><br /><span class="token-type-description">Description to the current date token type.</span></h4>
    <div>
        <table>
            <thead>
                <th>Token</th>
                <th>Name</th>
                <th>Description</th>
            </thead>
            <tbody>
                <tr>
                    <td>[current-date:short]</td>
                    <td>Short</td>
                    <td>Date in short format.</td>
                </tr>
                <tr>
                    <td>[current-date:long]</td>
                    <td>Long</td>
                    <td>Date in long format.</td>
                </tr>
            </tbody>
        </table>
    </div>
    <h4 class="token-type"><a href="#">Current user</a></h4>
    <div>
        <table>
            <thead>
                <th>Token</th>
                <th>Name</th>
                <th>Description</th>
            </thead>
            <tbody>
                <tr>
                    <td>[current-user:name]</td>
                    <td>Name</td>
                    <td>Name of the user.</td>
                </tr>
                <tr>
                    <td>[current-user:uid]</td>
                    <td>UID</td>
                    <td>Unique ID of the user.</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

thead th {
    font-weight: bold;
}

td, th {
    padding: 2px 5px 2px 5px;
}

JavaScript

$(function() {
    $("div.token-tree").accordion({
        active: false,
        collapsible: true,
        header: 'h4.token-type'
    });
});