JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title>Animations and min-height/min-width</title> 
</head> 
<body> 
    <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>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script> 

    <script type="text/javascript"> 
    $(function() {
        $('#toggle').click(function() {
            $('.example').toggle(1000);
        });
        $('#slide').click(function() {
            $('.example').slideToggle(1000);
        });
    });
    </script> 
</body> 
</html>

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; }