JSFiddle - React, Tailwind, and code Playground

HTML

<section id="accordion" class="accordion accordion-faq">
    <article class="accordion-item">
        <h3 class="accordion-header">Section 1 Section heading that is really long to see what happens when it wraps to two lines</h3>
        <div class="accordion-content">
            <p>
                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
        </div>
    </article>
    <article class="accordion-item">
        <h3 class="accordion-header">Section 2</h3>
        <div class="accordion-content">
            <p>
                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
        </div>
    </article>
    <article class="accordion-item">
        <h3 class="accordion-header">Section 1</h3>
        <div class="accordion-content">
            <p>
                Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
                ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
                lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
            </p>
            <ul class="list-standard">
                <li>List item one</li>
                <li>List item two</li>
                <li>List item three</li>
            </ul>

        </div>
    </article>
</section>

<button...

CSS

.accordion {
  width: 70%; 
  font-family: sans-serif;  
  margin: 20px auto;        
}
.accordion.js-accordion-active .accordion-content {
  display: none;
}
.accordion.js-accordion-active .is-open-pane {
  border: solid 2px #bb16a3;
}
.accordion .accordion-item {
  -webkit-border-radius: 0.3125em;
  -moz-border-radius: 0.3125em;
  border-radius: 0.3125em;
  background-color: #fbfbfb;
  background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
  background-image: -ms-linear-gradient(top, #ffffff, #f4f4f4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f4f4f4));
  background-image: -webkit-linear-gradient(top, #ffffff, #f4f4f4);
  background-image: -o-linear-gradient(top, #ffffff, #f4f4f4);
  background-image: linear-gradient(top, #ffffff, #f4f4f4);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4', GradientType=0);
  margin-bottom: 0.3125em;
  border: solid 2px #cccccc;
  padding: 0.625em;
}
.accordion .accordion-header {
  display: block;
  position: relative;
  cursor: pointer;
  color: #666666;
}
.accordion .accordion-header:hover {
  color: #bb16a3;
}
.accordion-faq .accordion-header {
  padding: 0 1.5625em;
  margin-bottom: 0;
}
.accordion-faq .accordion-header:before {
  color: #cccccc;
  display: inline;
  content: "q. ";
  text-transform: uppercase;
  width: 1.5625em;
  position: absolute;
  left: -0.125em;
}
.accordion-faq .accordion-content:before {
  display: block;
  content: "a. ";
  color: #bb16a3;
  font-weight: bold;
  text-transform: uppercase;
}
.accordion-faq .accordion-content p {
  padding-left: 1.5625em;
}

JavaScript

/*
    Simple accordion, suitable for responsive design
    https://github.com/simonsmith/jQuery-Accordion
    @blinkdesign
*/

!function(global) {

    var wrap = function($) {

        var Accordion = function(container, options) {
            if (!(this instanceof Accordion)) {
                return new Accordion(container, options);
            }

            this.options = $.extend(true, {
                openClass: 'is-open-pane',
                activeClass: 'js-accordion-active',
                animSpeed: 'fast',
                touchEvents: true,
                touchEventType: 'touchstart',
                openPane: 0,
                selectors: {
                    item: '.accordion-item',
                    header: '.accordion-header',
                    content: '.accordion-content'
                }
            }, options);

            this.container = $(container);
            this.panes = this.container.find(this.options.selectors.item);

            this.attachEvents();

            if (typeof this.options.openPane === 'number') {
                this.panes.eq(this.options.openPane)
                    .addClass(this.options.openClass)
                    .find(this.options.selectors.content)
                    .css('display', 'block');
            }

            this.container.addClass(this.options.activeClass);
        };

        Accordion.prototype = {

            attachEvents: function() {
                var self = this, eventType;

                if (self.options.touchEvents) {
                    // Still check for touch support
                    eventType = ('ontouchstart' in document.documentElement ? self.options.touchEventType : 'click');
                } else {
                    eventType = 'click';
                }

                this.container.on(eventType + '.accordion', this.options.selectors.header, function(event) {
                    var $this = $(this);
                    var paneParent =...