JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<div id="tabs">
    <ul>
        <li><a href="#tab1">Tab !</a>

        </li>
        <li><a href="#tab2">Tab @</a>

        </li>
        <li><a href="#tab3">Tab #</a>

        </li>
        <li><a href="#tab4">Tab $</a>

        </li>
        <li><a href="#tab5">Tab %</a>

        </li>
    </ul>
    <div id="tab1">This is Tab !(1) with</div>
    <div id="tab2">This is Tab @(2)</div>
    <div id="tab3">This is Tab #(3)</div>
    <div id="tab4">This is Tab $(4)</div>
    <div id="tab5">This is Tab %(5) with a
        <button onclick="show()">Button!</button>
        <p>and some secret text...</p>
    </div>
</div>

CSS

p {
    display: none;
}

JavaScript

$(document).ready(function () {
    $('#tabs').tabs();
    $('button').button();
    $('button').click(function () {
        $('p').slideToggle('fast');
    });
});