JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page1" data-role="page" data-theme="a">
<div data-role="header">
<h1>Spellbook</h1>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-theme="a">
<h3>Bard</h3>
<ul data-role="listview" data-theme="a">
<li><a href="#bc">Cantrips</a></li>
<li><a href="#b1">Level 1</a></li>
<li><a href="#b2">Level 2</a></li>
<li><a href="#b3">Level 3</a></li>
<li><a href="#b4">Level 4</a></li>
<li><a href="#b5">Level 5</a></li>
<li><a href="#b6">Level 6</a></li>
<li><a href="#b7">Level 7</a></li>
<li><a href="#b8">Level 8</a></li>
<li><a href="#b9">Level 9</a></li>
</ul>
</div>
<div data-role="page" data-theme="a" id="bc">
<div data-role="header">
<h1><label> Bard Cantrips<input id="bcsearch" type="text"/> </label></h1>
</div>
<div data-role="content">
<ul id="bc" data-role="listview">
<li><a href="BladeWard.html">Blade Ward <small><sub>Abjuration</sub></small></a></li>
<li><a href="DancingLights.html">Dancing Lights <small><sub>Evocation</sub></small></a></li>
<li><a href="Friends.html">Friends <small><sub>Enchantment</sub></small></a></li>
<li><a href="Light.html">Light <small><sub>Evocation</sub></small></a></li>
<li><a href="MageHand.html">Mage Hand <small><sub>Conjuration</sub></small></a></li>
<li><a href="Mending.html">Mending <small><sub>Transmutation</sub></small></a></li>
<li><a href="Message.html">Message <small><sub>Transmutation</sub></small></a></li>
<li><a href="MinorIllusion.html">Minor Illusion <small><sub>Illusion</sub></small></a></li>
<li><a href="Prestidigitation.html">Prestidigitation <small><sub>Transmutation</sub></small></a></li>
<li><a href="Thunderclap.html">Thunderclap <small><sub>Evocation</sub></small></a></li>
<li><a href="TrueStrike.html">True Strike <small><sub></sub>Divination</small></a></li>
<li><a href="ViciousMockery.html">Thunderball's Advantage...