JSFiddle - React, Tailwind, and code Playground

HTML

<input id="id1" type="checkbox">
<label for="id1">Lorem ipsum</label>
<div class="height">Dolor sit amet</div>
<input id="id2" type="checkbox">
<label for="id2">Lorem ipsum</label>
<div class="opacity">Dolor sit amet</div>
<input id="id3" type="checkbox">
<label for="id3">Lorem ipsum</label>
<div class="left">Dolor sit amet</div>
<input id="id4" type="checkbox">
<label for="id4">Lorem ipsum</label>
<div class="opacity left">Dolor sit amet</div>

CSS

input{
    display:none;
}
label{
    cursor:pointer;
}
label + div{
    overflow:hidden;
    background:#fc0;
    height:300px;
    width:300px;
    transition-duration:.15s;
}
.height{
    height:0;
}
.opacity{
    opacity:0;
    height:0;
    transition-property:height, opacity;
    transition-delay:0, .20s;
    transition-duration:.075s, .15s;
}
.left{
    margin-left:-100%;
    height:0;
    transition-property:height, margin-left;
    transition-delay:0, .10s;
    transition-duration:.075s, .15s;
}
.opacity.left{
    transition-property:opacity, margin-left;
    transition-delay:.15s, .10s;
}
input:checked + label + .height{
    height:300px;
}
input:checked + label + .opacity{
    opacity:1;
    height:300px;
}
input:checked + label + .left{
    margin-left:0;
    height:300px;
}