JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box">Content Here</div>

CSS

.box {
  
    max-height: 500px;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #f00;
    }

    input:checked~.box {
    max-height: 0;
    transition: max-height 0.25s ease-in;
    }