JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="test" tabindex="-1">
    <textarea>Something</textarea>
</div>

CSS

div {
    border: 2px dashed #f90;
    width: 50%;
    margin: 0 auto;
}

textarea {
    display: block;
    width: 80%;
    margin: 1em auto;
}

JavaScript

var textareas = document.getElementsByTagName('textarea');
    
    for (i=0;i<textareas.length;i++){
        if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
            textareas[i].onfocus = function(){
                this.parentNode.style.borderStyle = 'solid';
            }
            textareas[i].onblur = function(){
                this.parentNode.style.borderStyle = 'dashed';
            }
        }
    }