JSFiddle - React, Tailwind, and code Playground

by namuol

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<button class='btn'>Hello</button>
<span style='display:none'>
    <button style='display: none' class='btn'><span style='display:none'>MWAHAHAHAHHAA</span></button>
</span>

<hr/>
<input type='text' />
<div id='user_content'></div>

CSS

body {
    padding: 20px;
}

button.btn {
    text-align: left;
    text-overflow: clip;
    white-space: nowrap;
    box-sizing: border-box;
}

#user_content {
    background: #FA8;
    text-align: left;
    text-overflow: clip;
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden;
    max-width: 500px;
    padding: 20px;
    color: black;
    border-radius: 5px;
    border: 1px solid #963;
}

span {
    display: inline-block;
    text-align: center;
    width: 150px;
    margin: 0 auto;
}

span > button.btn {
    text-align: center;
}

@media screen and (max-width: 800px) {
    span {
        width: 10px;
    }
}

JavaScript

$.fn.transitionContent = function (ms, ease) {
    ms = ms || 250;
    ease = ease || 'ease-out';
    
    this.each(function () {
        var trans = 'width '+ms+'ms '+ease+', height '+ms+'ms '+ease,
            el = $(this),
            clone,
            trans_keys = [
                '-webkit-transition',
                '-moz-transition',
                '-o-transition',
                'transition'
            ],
            transition_css,
            i, prev_w, prev_h, hide=false;
        
        transition_css = {};
        
        for(i=0;i<trans_keys.length;++i) {
            transition_css[trans_keys[i]] = trans;
        }
        clone = el.clone().show().appendTo('body').css({
            width: '', height: ''
        });

        prev_w = clone.css('width');
        prev_h = clone.css('height');
        clone.remove();
        
        el.css({width:prev_w, height:prev_h});
        
        if (hide) el.hide();
        
        this.addEventListener('DOMSubtreeModified', function(e) {
            var clone, w, h, css;
            clone = el.clone().css({
                width: '', height: ''
            }).hide().appendTo('body');
            w = clone.css('width');
            h = clone.css('height');
            clone.remove();
    
            css = {};
    
            for(i=0;i<trans_keys.length;++i) {
                css[trans_keys[i]] = '';
            }
            
            $.extend(css, {
                width: prev_w, height: prev_h
            });
            
            el.css(css);
            
            css = $.extend(transition_css, {
                width: w,
                height: h
            });
            
            el.css(css);
            
            prev_w = w;
            prev_h = h;
        });
    });
    
    return this;
};
    
$('button').transitionContent().click(function() {
    if ($(this).text() === 'Hello') {
        $(this).html('Hello, World!');
    } else {
        $(this).html('Hello');
   ...