JSFiddle - React, Tailwind, and code Playground

by 1eddy87

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="http://cdn.jsdelivr.net/velocity/1.2.2/velocity.ui.min.js"></script>
<div class="tootify-main tootbox-container">
    <div class="toot-post-box">
        <div class="home-toot-box toot-user">
            <!--<div class="home-toot-box toot-user">-->
            <img class="user-thumbnail-img top-toot-box-user-image size34" src="https://pbs.twimg.com/profile_images/460082101484679168/QWDP7QUm_normal.jpeg" alt="" /> <span class="toot-form-main-counter hidden" style="position: absolute; top: 75px; left: 28px;">160</span>

            <form class="toot-form">
                <div style="margin-bottom: 0px;" class="form-group has-feedback">
                    <textarea onfocus="handleFocus();" oninput="countTootChars(this); checkTootLength(this);" value="" maxlength="160" style="border-color: #FACFCE !important; padding: 5px; height: 34px; resize: none; border-radius: 0;" type="text" class="toot-main-input form-control">Toot your horn, share your thoughts
                    </textarea>
                        <button onclick="handleFocus(); return false;" style="pointer-events: inherit; cursor: pointer;" class="toot-special-button btn btn-danger fa fa-pencil-square-o form-control-feedback"></button>

                </div>
                <!--<textarea onfocus="handleFocus();" oninput="countTootChars(this); checkTootLength(this);" value="" placeholder="Toot your horn, share your thoughts" class="toot-main-input" type="text" maxlength="160"></textarea>
                    <button...

CSS

.tootify-main {
    width: 100%;
}
.home-toot-box {
    border-color: #FACFCE !important;
    background-color: #FDECEB !important;
}
.tootbox-container .toot-post-box {
    border: 1px solid #FACFCE;
}
.tootbox-container .toot-user {
    position: relative;
}
.toot-user {
    padding: 5px 5px 5px 12px;
    background-color: #F5F8FA;
}
.toot-form {
    margin-left: 56px;
}
.toot-main-input {
    width: 100%;
    min-height: 32px;
    height: 32px;
    border-color: #FACFCE !important;
    padding: 5px;
    resize: none;
    background-color: #FFF !important;
    outline: none;
    box-shadow:none !important;
    border:1px solid #FACFCE !important;
}
.top-toot-box-user-image {
    left: 28px;
    position: absolute;
    top: 5px;
}
.size34 {
    width: 34px !important;
    height: 34px !important;
    border-radius: 4px !important;
}
img.user-thumbnail-img {
    border: 0px none;
}
.toot-special-button {
    /*position: absolute;
    bottom: 12px;
    right: 10px;*/
}
/*.toot-main-btn {
    padding: 1px 4px !important;
}*/
.toot-main-preview {
    margin-bottom: 5px;
    padding: 10px 15px 10px 30px !important;
    background-color: #FFF !important;
    border-bottom: 1px solid #DDD;
}
.main-post-img {
    display: inline;
    max-width: 33.3333%;
    /*width: 33.3333%;*/
    height: auto;
}
.main-post-text {
    display: inline;
    position: absolute;
    margin: 0px 15px;
    width: auto !important;
    font-size: small;
}
textarea.form-control:focus {
    border-color: #FACFCE !important;
    outline: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;  
}
.btn {
    padding: 0;
    border-radius: 0;
    position: absolute;
    bottom: 0px;
    right: 0px;
    max-height: 34px;
    min-width: 34px;
}
.form-control-feedback {
    top: initial;
}
.new-toot-btn {
    width: auto !important;
    padding: 0 10px;
    border-top-left-radius: 3px;
}

JavaScript

$(function () {

    $('.toot-main-input').bind('blur', function () {

        //$(this).css('height', '34px');
        $(this).velocity({
            height: 34
        }, {
            duration: 200,
            complete: function () {
                $('.toot-form-main-counter').addClass('hidden');
                $(this).val('Toot your horn, share your thoughts');
                $(this).next('.toot-special-button').css('pointer-events', 'inherit');
            }
        });
        $(this).next('.toot-special-button').removeClass('new-toot-btn');
        $(this).next('.toot-special-button').text('');
        $(this).next('.toot-special-button').addClass('fa fa-pencil-square-o');
        $('.toot-form-main-counter').addClass('hidden');
        $(this).next('.toot-special-button').removeClass('disabled');

    });

});

focusCompleted = true;
handleFocus = function () {
    if (!focusCompleted) {
        return;
    }
    focusCompleted = false;
    try {
        var e = $('.toot-main-input');

        // mobile = height: 125px | also the counter needs to be 110px
        // others = height: 90px

        //e.css('height', '110px');
        e.velocity({
            height: 90
        }, {
            duration: 200,
            complete: function () {
                $('.toot-form-main-counter').removeClass('hidden');
            }
        });
        e.next('.toot-special-button').removeClass('fa fa-pencil-square-o');
        e.next('.toot-special-button').addClass('new-toot-btn');
        e.next('.toot-special-button').text('Toot');
        e.next('.toot-special-button').addClass('disabled');
        e.next('.toot-special-button').css('pointer-events', 'none');
        e.val('');
        e.focus();
    } finally {
        focusCompleted = true;
    }
};

countTootChars = function (t) {

    $('.toot-form-main-counter').text(160 - t.value.length);

};

checkTootLength = function () {

    if ($('.toot-main-input').val().length > 5) {
       ...