JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
    <div class="section">Some content</div>
</div>

CSS

body{
    background: #f1f1f1;
}

@-webkit-keyframes fadeIn { from { .opacity(0); } to { .opacity(1); } }
@-moz-keyframes fadeIn { from { .opacity(0); } to { .opacity(1); } }
@keyframes fadeIn { from { .opacity(0); } to { .opacity(1); } }


.section{
    display: block;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
    cursor: pointer;
    animation: fadeIn .5s ease, margin-top .5s ease, margin-bottom .5s ease;
}
.section.open {
          margin: 20px 0;
}

JavaScript

$(".section").click(function(){
    $(this).toggleClass("open");
});