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">
<div class="[ panel panel-default ] toot-main-panel">
    <div class="panel-heading">
        <img class="[ img-responsive pull-left ]" src="" alt="identicon" />
         <h3>Username</h3>

    </div>
    <div class="panel-body" style="padding: 5px 0 0 15px;"> <i>Tell us more</i>

    </div>
    <div class="panel-footer">
        <div class="toot-main-btn input-placeholder text-center">Toot...</div>
    </div>
    <div class="toot-main-panel-comment">
        <div class="toot-main-panel-textarea">
            <textarea oninput="checkTootLength();" class="enabled" style="padding: 5px;" rows="3" placeholder="Toot your horn, share your thoughts"></textarea>
            <button type="reset" class="cancel-post [ btn btn-default ]">Cancel</button>
            <button type="submit" class="postBtn pull-right [ btn btn-success disabled ]">Post</button>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

CSS

.toot-main-panel {
    position: relative;
    border-radius: 0px;
    border: 1px solid rgb(216, 216, 216);
    font-family:'helvatica', sans-serif;
}
.toot-main-panel > .dropdown {
    position: absolute;
    top: 5px;
    right: 15px;
}
.toot-main-panel > .dropdown > span > span {
    font-size: 10px;
}
.toot-main-panel > .dropdown > .dropdown-menu {
    left: initial;
    right: 0px;
    border-radius: 2px;
}
.toot-main-panel > .panel-heading, .toot-main-panel > .panel-footer {
    background-color: rgb(255, 255, 255);
    border-width: 0px;
}
.toot-main-panel > .panel-heading {
    padding-bottom: 5px;
}
.toot-main-panel > .panel-heading > img {
    margin-right: 15px;
}
.toot-main-panel > .panel-heading > h3 {
    margin: 0px;
    font-size: 14px;
    font-weight: 700;
}
.toot-main-panel > .panel-heading > h5 {
    color: rgb(153, 153, 153);
    font-size: 12px;
    font-weight: 400;
}
.toot-main-panel > .panel-body {
    padding-top: 5px;
    font-size: 13px;
}
.toot-main-panel > .panel-footer {
    font-size: 14px;
    font-weight: 700;
    min-height: 54px;
}
.toot-main-panel > .panel-footer > .btn {
    float: left;
    margin-right: 8px;
}
.toot-main-panel > .panel-footer > .input-placeholder {
    display: block;
    color: rgb(153, 153, 153);
    font-size: 12px;
    font-weight: 400;
    padding: 8px 6px 7px;
    border: 1px solid rgb(217, 217, 217);
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px;
    cursor: pointer;
}
.toot-main-panel.toot-main-panel-comment > .panel-footer > .input-placeholder {
    display: none;
}
.toot-main-panel > .toot-main-panel-comment {
    display: none;
    padding: 10px 15px 15px;
    border-top: 1px solid rgb(229, 229, 229);
    background-color: rgb(245, 245, 245);
}
.toot-main-panel.toot-main-panel-comment > .toot-main-panel-comment {
    display: block;
}
.toot-main-panel > .toot-main-panel-comment > .toot-main-panel-textarea {
    float: right;
    width: 100%;
    /*width:...

JavaScript

$(function () {

    $('.toot-main-btn').click(function () {
        var pgpt = $(this).parent().next();
        pgpt.slideToggle();
        pgpt.find('textarea').focus();
    });

    var checkTootLength = function () {
        var $this = $(this);

        if ($this.val().length > 5) {
            $this.siblings('.postBtn').removeClass('disabled');
        } else {
            $this.siblings('.postBtn').addClass('disabled');
        }
    };
    
    $('.enabled').keyup(checkTootLength);

    $('.cancel-post').click(function () {
        $(this).closest('.toot-main-panel-comment').slideToggle();
        $(this).prevAll('.enabled').val('');
    });

});