JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div data-role="page" id="MainPage">
<div data-role="header" data-theme="b">
    <h1>Available token types</h1>
    <a href="#" data-icon="delete" data-theme="b" class="ui-btn-right">Close</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
    <li><a href="#current-date"><h2>Current date</h2><p>Tokens related to the current date and time.</p></a></li>
    <li><a href="#current-user"><h2>Current user</h2><p>Tokens related to the currently logged in user.</p></a></li>
    <li><a href="#node"><h2>Node</h2><p>Tokens related to content.</p></a></li>
</ul>
</div>
</div>

<div data-role="page" id="current-date">
<div data-role="header" data-theme="b">
    <h1>Current Date tokens</h1>
    <a href="#MainPage" data-icon="arrow-l" data-theme="b">Back</a>
    <a href="#" data-icon="delete" data-theme="b">Close</a>
   </div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
    <li><h3>Short date format</h3><p>[current-date:short]</p></li>
    <li><h3>Medium date format</h3><p>[current-date:medium]</p></li>
    <li><h3>Custom format</h3><p>This is a dynamic token.</p><p>[current-date:custom:*]</p></li>
</ul>
</div>
</div>

<div data-role="page" id="current-user">
<div data-role="header" data-theme="b">
    <h1>Current user tokens</h1>
    <a href="#MainPage" data-icon="arrow-l" data-theme="b">Back</a>
    <a href="#" data-icon="delete" data-theme="b">Close</a>
   </div>
<div data-role="content">
<ul data-role="listview" data-filter="true">
    <li><h3>User ID</h3><p>The ID of the user.</p><p>[user:uid]</p></li>
    <li><h3>Name</h3><p>The name of the user.</p><p>[user:name]</p></li>
</ul>
</div>
</div>

<div data-role="page" id="node">
<div data-role="header" data-theme="b">
    <h1>Node tokens</h1>
    <a href="#MainPage" data-icon="arrow-l" data-theme="b">Back</a>
    <a href="#" data-icon="delete" data-theme="b">Close</a>
    </span>
    </a>
   </div>
<div data-role="content">
<ul data-role="listview"...