JSFiddle - React, Tailwind, and code Playground

by Weron2

HTML

<button onclick="document.getElementById('slider').classList.toggle('closed');">☰</button
<div>
		<div class="slider closed" id="slider">
	    <div id="settings">
    	  HTML code:<br>
      	<textarea id="htmlcode" rows='20' cols='50'></textarea><br>
	      <input type="button" onclick ="savecode()" value="SaveCode"/> <br>	
	    </div>
		</div>
	</div>
    <div>
    textstststfauaSFDKHGSDFV
    </div>

CSS

.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */

	transition-property: all;
	transition-duration: 1s;
}

.slider.closed {
	max-height: 0;
}