JSFiddle - React, Tailwind, and code Playground

by SirDerpington

HTML

<div id="accordion">
     <h3>Puddy Tat</h3>

    <div>CONTENT FOR Puddy Tat</div>
     <h3>ThoseCats</h3>

    <div id="thoseCats">
        <ul>
            <li><a href="#0">Rory</a>
            </li>
            <li><a href="#1">Gerry</a>
            </li>
            <li><a href="#2">Lou</a>
            </li>
            <li><a href="#3">Rod</a>
            </li>
        </ul>
        <div id="0">Content panel linked to Rory tab, shown by defalt</div>
        <div id="1">Content panel linked to Gerry tab</div>
        <div id="2">Content panel linked to Lou tab</div>
        <div id="3">Content panel linked to Rod tab</div>
    </div>
     <h3>Jackson Browne</h3>

    <div>CONTENT FOR Jackson Browne</div>
     <h3>Bruce Springsteen</h3>

    <div>CONTENT FOR Bruce Springsteen</div>
     <h3>Me First and the Gimme Gimmes</h3>

    <div>CONTENT FOR Me First and the Gimme Gimmes</div>
     <h3>Dwight Yoakam</h3>

    <div>CONTENT FOR Dwight Yoakam</div>
</div>
</div>

JavaScript

$(document).ready(function () {
        $("#accordion").accordion({
            collapsible: true
        });
        $("#thoseCats").tabs();
    });