JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">
  <section class="round pad wide red expands flex col">
    <label>Headline</label>
    <section class="round pad blue expanded animated hidden stopClickProp">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vulputate lorem eu ligula fringilla, ut bibendum purus pulvinar. Cras a risus id est commodo ullamcorper feugiat accumsan nunc. Nulla bibendum libero lectus, eget commodo leo congue a. In hac habitasse platea dictumst. Integer finibus eget lacus et sollicitudin. Nam feugiat massa a tortor vehicula vehicula. Nullam quis placerat felis, vel pretium lectus. Suspendisse tempus ex risus, a imperdiet neque tristique at. Integer efficitur libero at tempor laoreet. Aenean ornare, lectus in ultricies imperdiet, nisi nunc sollicitudin velit, ac consectetur velit metus vitae erat. Donec dignissim consequat nibh ut commodo. Donec vitae augue turpis. Duis et dui quam. Nam elit diam, faucibus et rhoncus nec, pharetra a metus. Aenean mattis mauris vitae ligula laoreet suscipit. Suspendisse at dictum nulla.</p>
    </section> 
  </section>
</div>

CSS

.flex { display: flex }
.col { flex-direction: column }
.hidden { display: none }
.pad { padding: .25em }
.round { border-radius: 1em }
.wide { width: 480px }
.red { background: red }
.blue { background: blue }

@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

.animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px)...

JavaScript

const ready = fun => {
  document.readyState === 'interactive' || 'complete' ?
    fun() : document.addEventListener('DOMContentLoaded', fun)
}

const expandClick = e => {
  e.currentTarget.querySelectorAll('.expanded').forEach(child => {
    child.classList.toggle('hidden')
    child.classList.toggle('slideInDown')
  })
}

ready(() => {
  /** Toggle .hidden child classes on .expands click */
  document.querySelectorAll('.expands').forEach(expandable => {
    expandable.addEventListener('click', expandClick)
  })

  /** Stop click event propagation at stopClickProp */
  document.querySelectorAll('.stopClickProp').forEach(noProp => {
    noProp.addEventListener('click', e => { e.stopPropagation() })
  })
})