JSFiddle - React, Tailwind, and code Playground

by feldversuch

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container">
        <div class="row">
             <div id="content" class="span9">
                <h4> Chrome ok, FF >= 15 has problems: click 2 x on [hide all] - Game Over</h4>
                
                <button type="button" class="btn" data-toggle="collapse" data-target="#demo1">
                  toggle #demo1
                </button>
                
                <button type="button" class="btn" data-toggle="collapse" data-target="#demo2">
                  toggle #demo2
                </button>
                <button type="button" class="btn btn-danger" onclick="$('.collapse').collapse('show');return false;">
                  show all
                </button>
                <button type="button" class="btn btn-danger" onclick="$('.collapse').collapse('hide');return false;">
                  hide all
                </button>
                <br /><br />
<div id="collapser"> 
    
    <div id="demo1" class="btn collapse in"> <span class="badge">#demo1</span> 
            Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, initially shown </div>
    
    <br /><br />
    
    
    <div id="demo2" class="btn collapse in"> <span class="badge">#demo2</span> 
            Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, Collapsible Content, initially shown </div>
                

        </div>
    </div>
</div>
</div>
</body>
</html>

CSS

QGNoYXJzZXQgInV0Zi04IjsKYXJ0aWNsZSwKYXNpZGUsCmRldGFpbHMsCmZpZ2NhcHRpb24sCmZpZ3VyZSwKZm9vdGVyLApoZWFkZXIsCmhncm91cCwKbmF2LApzZWN0aW9uIHsKICBkaXNwbGF5OiBibG9jazsKfQphdWRpbywKY2FudmFzLAp2aWRlbyB7CiAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICpkaXNwbGF5OiBpbmxpbmU7CiAgKnpvb206IDE7Cn0KYXVkaW86bm90KFtjb250cm9sc10pIHsKICBkaXNwbGF5OiBub25lOwp9Cmh0bWwgewogIGZvbnQtc2l6ZTogMTAwJTsKICAtd2Via2l0LXRleHQtc2l6ZS1hZGp1c3Q6IDEwMCU7CiAgLW1zLXRleHQtc2l6ZS1hZGp1c3Q6IDEwMCU7Cn0KYTpmb2N1cyB7CiAgb3V0bGluZTogdGhpbiBkb3R0ZWQgIzMzMzsKICBvdXRsaW5lOiA1cHggYXV0byAtd2Via2l0LWZvY3VzLXJpbmctY29sb3I7CiAgb3V0bGluZS1vZmZzZXQ6IC0ycHg7Cn0KYTpob3ZlciwKYTphY3RpdmUgewogIG91dGxpbmU6IDA7Cn0Kc3ViLApzdXAgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKICBmb250LXNpemU6IDc1JTsKICBsaW5lLWhlaWdodDogMDsKICB2ZXJ0aWNhbC1hbGlnbjogYmFzZWxpbmU7Cn0Kc3VwIHsKICB0b3A6IC0wLjVlbTsKfQpzdWIgewogIGJvdHRvbTogLTAuMjVlbTsKfQppbWcgewogIG1heC13aWR0aDogMTAwJTsKICB3aWR0aDogYXV0byBcOTsKICBoZWlnaHQ6IGF1dG87CiAgdmVydGljYWwtYWxpZ246IG1pZGRsZTsKICBib3JkZXI6IDA7CiAgLW1zLWludGVycG9sYXRpb24tbW9kZTogYmljdWJpYzsKfQojbWFwX2NhbnZhcyBpbWcsCi5nb29nbGUtbWFwcyBpbWcgewogIG1heC13aWR0aDogbm9uZTsKfQpidXR0b24sCmlucHV0LApzZWxlY3QsCnRleHRhcmVhIHsKICBtYXJnaW46IDA7CiAgZm9udC1zaXplOiAxMDAlOwogIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7Cn0KYnV0dG9uLAppbnB1dCB7CiAgKm92ZXJmbG93OiB2aXNpYmxlOwogIGxpbmUtaGVpZ2h0OiBub3JtYWw7Cn0KYnV0dG9uOjotbW96LWZvY3VzLWlubmVyLAppbnB1dDo6LW1vei1mb2N1cy1pbm5lciB7CiAgcGFkZGluZzogMDsKICBib3JkZXI6IDA7Cn0KYnV0dG9uLApodG1sIGlucHV0W3R5cGU9ImJ1dHRvbiJdLAppbnB1dFt0eXBlPSJyZXNldCJdLAppbnB1dFt0eXBlPSJzdWJtaXQiXSB7CiAgLXdlYmtpdC1hcHBlYXJhbmNlOiBidXR0b247CiAgY3Vyc29yOiBwb2ludGVyOwp9CmlucHV0W3R5cGU9InNlYXJjaCJdIHsKICAtd2Via2l0LWJveC1zaXppbmc6IGNvbnRlbnQtYm94OwogIC1tb3otYm94LXNpemluZzogY29udGVudC1ib3g7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgLXdlYmtpdC1hcHBlYXJhbmNlOiB0ZXh0ZmllbGQ7Cn0KaW5wdXRbdHlwZT0ic2VhcmNoIl06Oi13ZWJraXQtc2VhcmNoLWRlY29yYXRpb24sCmlucHV0W3R5cGU9InNlYXJjaCJdOjotd2Via2l0LXNlYXJjaC1jYW5jZWwtYnV0dG9uIHsKICAtd2Via2l0LWFwcGVhcmFuY2U6IG5vbmU7Cn0KdGV4dGFyZWEgewogIG92ZXJmb...