JSFiddle - React, Tailwind, and code Playground

HTML

<dl class="accordion"> 
    <dt>A</dt>
    <dd>
        <p>• 1
            <br />• 2
            <br />• 3
            <br />• 4
            <br />• 5
            <br />• 6</p>
    </dd>
</dl>

CSS

* {
    margin:0;
    padding:0;
}
.accordion {
    background-color: black;
    border-radius: 10px;
    padding: 10px 0;
}
.accordion dt {
    padding: 0.5em;
    background-color:#456db5;
    cursor:pointer;
    border-bottom: 1px solid #355faa;
    font-size: 13px;
}
.accordion dt:hover {
    color: #ffffff;
}
.accordion .on {
    background-color:#456db5;
    cursor:default;
}
.accordion dt, .accordion .on:hover {
    color:white;
}
.accordion dd {
    padding-left: 1em;
    margin: 0 auto;
    padding-right: 0.5em;
    background-color: white;
    font-size: 14px;
}
/* NOTE:
                 Do not apply top/bottom padding or margin to the accordion content,
                 as its affects to the box model will cause the animation to be choppy.
                 Instead, apply vertical spacing to the content elements.
                 */
 .accordion dd p {
    padding-top:.5em;
    padding-bottom:.5em;
}

JavaScript

if (typeof jQuery != "undefined") {
       (function ($) {
           $('.accordion dt').each(function () {
               $(this).on('click', function () {
                   $(this).toggleClass('on').siblings('.on').removeClass('on').end()
                       .next('dd').slideToggle().siblings('dd').slideUp();
               }).next('dd').hide();
           });
       })(jQuery);
   }