JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="accordion">

  <li>
        <h3>Section 1</h3>
      
    <ul class="accordion">
      <li>
          <h4> Link 1</h4>
          <p>content</p>
        </li>
      <li>
          <h4> Link 2</h4>
          <p>content</p>
        </li>
      <li>
          <h4> Link 3</h4>
          <p>content</p>
        </li>
    </ul>
      
  </li>
  <li>
        <h3>Section 2</h3>
    
    <ul class="accordion">
      <li>
          <h4> Link 1</h4>
          <p>content</p>
        </li>
      <li>
          <h4> Link 2</h4>
          <p>content</p>
        </li>
      <li>
          <h4> Link 3</h4>
          <p>content</p>
        </li>
    </ul>
      
  </li>
    </ul>

CSS

.ui-accordion-header-active{
   background:green;
}
.li-accordion-header-active{
   background:green;
}
.li-accordion-header-active{
   background:red;
}

JavaScript

$(".accordion").accordion({
   			
        active: false,
        autoHeight: false,
        collapsible: true,
        alwaysOpen: false,
        icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
    });