JSFiddle - React, Tailwind, and code Playground

by jitter

HTML

<button id="toggle">.toggle(1000)</button> <button id="slide">.slideToggle(1000)</button> 
<div class="container"> 
    <div class="example">This is just a typical fixed width/height div.</div> 
</div> 
<div class="container"> 
    <div class="example" style="min-width:150px;min-height:50px;">This div has a min-height and min-width.</div> 
</div>

CSS

body { font:1em/1.5 Georgia, serif; color:#222; padding:20px 60px; background-color:#fff; }
h1 { font-weight:normal; font-size:1.5em; margin:0; }
p { margin:1em 0; max-width:33em; }
code { background-color:#eee; font-family:Monaco,Consolas,Courier; font-size:0.75em; }
button { font-size:inherit; }
.container { width:300px;height:100px;margin:1em 1em 1em 0; border:1px solid #ccc; float:left; }
.example { width:300px;height:100px; background-color:#444; color:#fff; display:none; font-family:sans-serif; }

JavaScript

$('#toggle').click(function() {
    $('.example').toggle(1000);
});
$('#slide').click(function() {
    $('.example').css({
        minHeight: 0,
        minWidth: 0
    }).slideToggle(1000, function() {
        $(this).css({
        minHeight: "",
        minWidth: ""
    });
    });
});