JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="accordion">
    <h3 id="tab1">
        <a href="#">Title 1</a>
    </h3>
    <p>Description Title 1</p>
    <h3 id="tab2">
        <a href="#">Title 2</a>
    </h3>
    <p>Description Title 2</p>
    <h3 id="tab3">
        <a href="#">Title 3</a>
    </h3>
    <p>Description Title 3</p>
</div>

CSS

.accordion{
    border:1px solid #efefef;
    border-radius:6px;

}
.accordion h3{
    margin:0;
    padding:0;
}
.accordion h3 a {
    
     line-height:40px;
    padding:10px 12px;
    display:block;  
    background:#aaaadd; 
  
}

.accordion h3 a:hover { text-decoration:none;   }
.accordion h3 a.active {
    background:#eeeeff;
}

.accordion h3:after{
    position:absolute;
    content:'';
    width: 0;
height: 0px;
    top:0px;
    right:0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #aeb8c2 transparent transparent transparent;

}

JavaScript

$('a').on('click', function(e){
    e.preventDefault();