JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="accordion">
    <h3>
        <a href="#" class="active">Title 1</a>
    </h3>
    <p>Description Title 1</p>
    <h3>
        <a href="#">Title 2</a>
    </h3>
    <p>Description Title 2</p>
    <h3>
        <a href="#">Title 3</a>
    </h3>
    <p>Description Title 3</p>
</div>

CSS

body{
    font-family:verdana;
    font-size:14px;
    color:#444;
}

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

}
.accordion h3{
    position:relative;
    margin:0;
    padding:0;
}
.accordion h3 a {
     line-height:40px;
    padding:10px 12px;
    display:block;  
    background:#afafaf; 
    text-decoration:none;  
}

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

.accordion > h3:after{
    position:absolute;
    content:'';
    width: 200;
height: 200px;
    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();