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">
<div class="content-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="top-timeline-toot-box-user-image size32" src="https://pbs.twimg.com/profile_images/460082101484679168/QWDP7QUm_normal.jpeg" alt="" />
                <form class="toot-form" method="post">
                    <textarea value="" class="toot-main-input" type="text"></textarea>
                    <button class="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>

CSS

.content-main {
    width: 100%;
}
.home-toot-box, .top-timeline-tweetbox .timeline-toot-box {
    border-color: #FACFCE !important;
    background-color: #FDECEB !important;
}
.top-timeline-tootbox .timeline-toot-box {
    border: 1px solid #E1E8ED;
}
.top-timeline-tootbox .toot-user {
    border-radius: 3px 3px 0px 0px;
    position: relative;
}
.home-toot-box, .top-timeline-tweetbox .timeline-tweet-box {
    border-color: #FACFCE !important;
}
.home-toot-box, .RetootDialog-commentBox, .WebToast-box--altColor, .content-main .conversations-enabled .expansion-container .inline-reply-tootbox {
}
.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;
}
input[type="text"], textarea {
    outline: none;
    box-shadow:none !important;
    border:1px solid #ccc !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 {
    border: 0px none;
}
button {
    position: absolute;
    bottom: 12px;
    right: 10px;
}
.toot-main-btn {
    padding: 1px 4px !important;
}

JavaScript

$(function () {

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

        $(this).css('height', '32px');
        $(this).next('button').addClass('toot-main-btn');
        $(this).next('button').text('');
        $(this).next('button').append('<i class="fa fa-pencil-square-o"></i>');

    }).bind('focus', function () {
        
        $(this).css('height', '110px');
        $(this).next('button').removeClass('toot-main-btn');
        $(this).next('button').text('Toot');

    });

});