JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function sc(id) { 
    var o = document.getElementById(id); 
    with (o.style) { display = display == "none" ? "block" : "none"; }
    }

</script>
<div class="infopane">
    <div class="highlight infopanehdr" onclick="return sc('inf_bof')">Title
    </div>
    <div class="infocontent" style="display: block; " id="inf_bof">
        <pre>
        Content is here
        Content is here
        Content is here
        Content is here
        </pre>
    </div>
</div>

CSS

/* DEFAULT CSS */
.infopane {
    border: 1px solid;
    margin: 5px 0;
    overflow: hidden;
}

.highlight {
    background-color: #c0c0c0;
}

.infocontent {
    padding-left:3px;
    padding-right:3px;
    overflow:hidden;
}

.infopanehdr {
    width: 100%;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    line-height: 2;
}

/* MANIPULATED CSS */

.infocontent {
    -webkit-transition: opacity 1s ease-out;
}

div[style='display: block; '].infocontent { opacity: 1; height: auto !important;}
div[style='display: none; '].infocontent {display:block !important;  opacity: 0; height: 0px; }