JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<!-- First -->
<div class="block">
<div class="block-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link text-primary px-0 text-uppercase" type="button"
data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
First block</button>
</h5>
</div>
<div id="collapseOne" class="collapse " aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<div class="form-check">
<input type="checkbox" class="form-check-input filter" id="automatic" >
<label class="form-check-label" for="automatic">One</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input filter" id="automatic" >
<label class="form-check-label" for="automatic">Two</label>
</div>
</div>
</div>
</div>
<!-- Second block -->
<div class="block">
<div class="block-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link text-primary...