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 top-timeline-tootbox">
    <div class="timeline-toot-box">
        <div class="home-toot-box toot-box component toot-user">
            <div class="home-toot-box toot-box component toot-user">
                <img class="user-thumbnail-img top-timeline-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: 95px; left: 28px;">160</span>

                <form class="toot-form">
                    <textarea onfocus="handleFocus();" oninput="countTootChars(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="http://resources1.news.com.au/images/2015/07/31/1227465/557821-66af1a64-3775-11e5-abab-c01a58cce53e.jpg" id="post-image-preview" /> <span class="main-post-text" id="post-loading-msg">
         While some...

CSS

body {
    background-color: #fafafa;
}
.tootify-main {
    width: 100%;
}
.home-toot-box {
    border-color: #FACFCE !important;
    background-color: #FDECEB !important;
}
.top-timeline-tootbox .timeline-toot-box {
    border: 1px solid #FACFCE;
}
.top-timeline-tootbox .toot-user {
    border-radius: 3px 3px 0px 0px;
    position: relative;
}
.toot-user {
    padding: 5px 5px 5px 12px;
    background-color: #F5F8FA;
    border-radius: 0px 0px 5px 5px;
}
.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-timeline-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;
}
.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;
}
.toot-main-preview {
    margin-bottom: 5px;
    padding: 10px 15px 10px 40px !important;
    background-color: #FFF !important;
    border-bottom: 1px solid #DDD;
}

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('button').addClass('toot-main-btn');
        $(this).next('button').text('');
        $(this).next('button').append('<i class="fa fa-pencil-square-o"></i>');
        $('.toot-form-main-counter').addClass('hidden');
        $(this).next('button').removeClass('disabled');

    });

});

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

        // mobile = height: 142px
        // others = height: 110px

        //e.css('height', '110px');
        e.velocity({
            height: 110
        }, {
            duration: 200,
            complete: function () {
                $('.toot-form-main-counter').removeClass('hidden');
            }
        });
        e.next('button').removeClass('toot-main-btn');
        e.next('button').text('Toot');
        e.next('button').addClass('disabled');
        e.focus();

    } finally {
        focusCompleted = true;
    }
};

countTootChars = function (t) {

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

};