JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/cferdinandi/houdini/58466163/dist/css/houdini.css">
<script src="https://cdn.rawgit.com/cferdinandi/houdini/master/dist/js/houdini.js"></script>
<script src="https://cdn.rawgit.com/cferdinandi/tabby/9dcb1a21/dist/js/tabby.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/cferdinandi/tabby/9dcb1a21/dist/css/tabby.css">
<!-- <ul class="tabs" data-tabs>
  <li><a href="#tab-a" data-tab>Tab A</a></li>
  <li><a href="#tab-b" data-tab>Tab B</a></li>
</ul>

<div data-tabs-content>
  <div id="tab-a" class="tabs-pane active" data-tabs-pane>
    <a class="collapse-toggle active" data-collapse data-group="accordion-a" href="#accordion-a-1">Accordion A item 1</a>
    <div id="accordion-a-1" class="collapse active">
      <h2>Accordion A item 1</h2>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>

    <a class="collapse-toggle" data-collapse data-group="accordion-a" href="#accordion-a-2">Accordion A item 2</a>
    <div id="accordion-a-2" class="collapse">
      <h2>Accordion A item 2</h2>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>
  </div>

  <div id="tab-b" class="tabs-pane" data-tabs-pane>
    <a class="collapse-toggle active" data-collapse data-group="accordion-b" href="#accordion-b-1">Accordion B item 1</a>
    <div id="accordion-b-1" class="collapse active">
      <h2>Accordion B item 1</h2>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>

    <a class="collapse-toggle" data-collapse data-group="accordion-b" href="#accordion-b-2">Accordion B item 2</a>
    <div id="accordion-b-2"...

JavaScript

tabby.init({
  toggleActiveClass: '-active',
  contentActiveClass: '-active',
});

houdini.init({
  toggleActiveClass: '-active',
  contentActiveClass: '-active',
});