JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="container">
<div id="control-container">
<p style="text-align: center;"><button id="clickMe">Click me</button></p>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum interdum erat sit amet aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu ligula nisi, vitae luctus nisl. Ut quis orci
nec magna ornare mollis consectetur sit amet nisi. Maecenas porttitor neque vel nisi sollicitudin sit amet
condimentum turpis semper. Nunc enim justo, pulvinar ut placerat a, pretium adipiscing tortor. Duis
rhoncus scelerisque sagittis. Donec lorem arcu, placerat a faucibus eu, malesuada et arcu. Maecenas vel
neque lacus.</p>
<p>Nulla facilisi. Nulla feugiat felis at tortor imperdiet porttitor. Phasellus gravida volutpat
euismod. Nunc a diam leo. Curabitur at urna diam, vel fringilla nisi. Mauris eleifend iaculis magna nec
varius. Nunc enim tortor, congue id elementum ut, pulvinar pretium ante. Integer fermentum ligula et
lectus scelerisque ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Aliquam vulputate odio nulla. Integer a risus non turpis ultrices tempus.
Etiam dapibus leo id orci dictum tristique. Suspendisse at arcu leo, a consectetur leo. Vivamus
congue nisl a justo molestie ornare. Maecenas at elit in ligula tristique bibendum vel quis dui.
Vivamus vitae congue mauris.</p>
</div>
</div>
</body>
CSS
#container {
width: 430px;
min-height: 50px;
margin: auto;
}
#control-container {
padding: 6px;
background: green;
}
#content {
padding: 6px;
display: none;
background: #B7CABF;
}
JavaScript
$(document).ready(function() {
$("#clickMe").click(function() {
$("#content").slideToggle('fast');
});
});