Bootstrap 4 Accordion With Tailwindcss

HTML

 <div id="accordion">

    <div class="card relative border-gray-100 border mb-3">
      <div class="card-header bg-gray-100 p-1  ">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body p-3  mt-1 ">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur tenetur autem aut quis, ipsum sunt
          reiciendis nobis iure sed, ab tempora quas recusandae distinctio cupiditate! Delectus deleniti assumenda omnis
          nihil.
        </div>
      </div>
    </div>

    <div class="card relative border-gray-100 border mb-3">
      <div class="card-header bg-gray-100 p-1">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body p-3  mt-1">
          Lorem ipsum..
        </div>
      </div>
    </div>

    <div class="card relative border-gray-100 border mb-3">
      <div class="card-header bg-gray-100 p-1">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#accordion">
        <div class="card-body p-3  mt-1">
          Lorem ipsum..
        </div>
      </div>
    </div>

  </div>

CSS

/* ######## collapse */

.collapse {
    @apply hidden;
}
.collapse.show {
    @apply block;
}