JSFiddle - React, Tailwind, and code Playground

HTML

<script src=" http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>
<table>
<tr>
    <td width="200">
         With KO. <br/>
        <textarea rows='10' cols='20' data-bind='hasfocus: hasFocusFlag'></textarea><br/>
        Focus Flag- <span data-bind="text: hasFocusFlag"></span>
    </td>
    <td>
         CSS only <br/>
        <textarea rows='10' cols='20' class="noKO"></textarea>
    </td>
</tr>
</table>

CSS

.hasFocus, .noKO:focus{
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;        
}

JavaScript

var vm = {
    hasFocusFlag : ko.observable(false),
    };

 
ko.applyBindings(vm);