JSFiddle - React, Tailwind, and code Playground
HTML
<h2>» <a href="#" id="clickMe">Click Me</a></h2>
<div id="hiddenContent">
<h2> Meaty Filler </h2>
<p>
Bacon ipsum dolor sit amet deserunt venison dolor meatball laboris short loin dolore capicola prosciutto. Tongue cillum salami, drumstick strip steak do spare ribs ball tip proident short loin ullamco ex tempor. Fugiat labore in ut quis ribeye turducken pig beef. Corned beef ham proident, nisi adipisicing bresaola irure kielbasa pig. T-bone nisi ham hock consequat laborum est exercitation dolor shoulder biltong velit qui sunt. Ut chuck esse short ribs turducken, pork loin id.
</p>
<p>
Nulla sunt aute meatloaf drumstick pork. Drumstick deserunt capicola aliqua flank leberkas brisket consectetur. Pork belly meatloaf proident, deserunt tri-tip voluptate aliqua. Commodo minim consequat, shoulder tenderloin eiusmod laborum excepteur flank reprehenderit in.
</p>
» <a href="http://baconipsum.com/"> Get Me Some Bacon</a>
</div>
CSS
#hiddenContent {display: none; border: 1px solid #ccc; background: #fcfcfc; padding: 1em; margin: 2em; border-radius: .25em; box-shadow: 2px 5px 10px #DBDBDB;}
#hiddenContent:hover { background: #FBFBFB; }
h2 { font: 1.5em/1.75em Georgia, serif; }
p { margin: 0 0 1em; font: 1em/1.25em Georgia, serif; text-align: justify; }
a { color: #444; text-decoration: none;}
a:hover { text-decoration: underline; color: #222; }
JavaScript
$('#clickMe').click(function(e) {
e.preventDefault();
$('#hiddenContent').fadeToggle();
})