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 size32" 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">
                    <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 onclick="handleFocus(); return false;" class="toot-special-button toot-main-btn btn btn-danger btn-sm" style="display: block; "><i class="fa fa-pencil-square-o"></i>
    
                    </button>
                </form>
            
            <!--</div>-->
        </div>
    </div>
</div>
<div id="article-preview" class="form-group toot-main-preview hidden" style="padding: 0px 15px; margin-bottom: 5px;">
    <img class="img-responsive main-post-img" src="" id="post-image-preview" />
    <span class="main-post-text" id="post-loading-msg"></span>
    <br style="clear: both" />
</div>

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;
}
.size32 {
    width: 32px !important;
    height: 32px !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;
}

JavaScript

$(function () {

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

        //$(this).css('height', '32px');
        $(this).velocity({
            height: 32
        }, {
            duration: 200,
            complete: function () {
                $('.toot-form-main-counter').addClass('hidden');
            }
        });
        $(this).next('.toot-special-button').addClass('toot-main-btn');
        $(this).next('.toot-special-button').text('');
        $(this).next('.toot-special-button').append('<i class="fa fa-pencil-square-o"></i>');
        $('.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('toot-main-btn');
        e.next('.toot-special-button').text('Toot');
        e.next('.toot-special-button').addClass('disabled');
        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) {
        $('.toot-special-button').removeClass('disabled');
    } else {
        $('.toot-special-button').addClass('disabled');
    }

};