JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="composer_container" class="">
    <div class="controls"> Put Controls Here</div> 
    <textarea id="composer" class="" ></textarea>
</div>

CSS

#composer_container{
    width:500px;
   display:inline-block
}
#composer:focus {
    outline:none; /** disable native focus outline **/
}
#composer {
    width:500px;
    height:250px;
    margin-top:0px;
    box-sizing:border-box;
}
.controls{
    box-sizing:border-box;
    padding:3px;
    width:100%;
    display:block;
    background:#cfcfcf;
    height:30px;
}

.focus{
     box-shadow:0 0 15px rgba(51, 153, 255, 0.4);    /** add custom outline on focus **/  
}

JavaScript

$("#composer").focus(function (){
    $("#composer_container").addClass("focus");
}).blur(function (){
    $("#composer_container").removeClass("focus");
});