JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="example1" data-div="divID1"></textarea>
<div class="divcontainer">
    <div id="divID1">
        <p>This div is blue</p>
        <br />
        <input type="checkbox" />Checkbox A
    </div>
</div>

<br />
<textarea id="example2" data-div="divID2" style="clear:both;"></textarea>

<div class="divcontainer">
    <div id="divID2">
        <p>This div is green</p>
        <br />
        <input type="checkbox" />Checkbox B
    </div>
</div>

CSS

#divID1, #divID2 {
    height:200px;
    width:150px;
    text-align:center;
    display:none;
    position:absolute;
    margin-left:10px;
}
#divID1 {
    background-color:#00bcff;
}
#divID2 {
    background-color:#41ea00;
}

html {border:5px solid red;}
body {border:5px solid blue;}

#example1, #example2 {
    float:left;
    overflow:hidden;
    height:100px;
}
#example2 {
    clear:both;
}
div.divcontainer {
    position:relative;
    float:left;
}

JavaScript

(function(){
    
    var current = null; //currently shown div - divID1 or divID2

    function focushandler(e) {
        e = e || window.event; //for IE8,7 compatibility
        var t = e.target || e.srcElement; // focused element
        var id = t.getAttribute('data-div');
        if (current !== null) {
            current.style.display = 'none';
        }
        var div = document.getElementById(id);
        div.style.display = 'block';
        current = div;
    }

    function clickhandler(e) {
        if (current == null) { //if both divs are hidden
            return;
        }
        e = e || window.event; //for IE8,7 compatibility
        var t = e.target || e.srcElement; // clicked element
        var sig = false;
        // now check all parents
        while (t) {
            if (t === current || t.nodeName == 'TEXTAREA') {
                sig = true;
            }
            t = t.parentNode;
        }
        if (sig) {
            return;
        }
        current.style.display = 'none';
        current = null;
    }

    function loadhandler(){
        if (document.documentElement.addEventListener) {
            document.documentElement.addEventListener('click', clickhandler, false);
            document.getElementById('example1').addEventListener('focus', focushandler, false);
            document.getElementById('example2').addEventListener('focus', focushandler, false);
        } else if (document.documentElement.attachEvent) {
            document.documentElement.attachEvent('onclick', clickhandler); //IE87
            document.getElementById('example1').attachEvent('onfocus', focushandler);
            document.getElementById('example2').attachEvent('onfocus', focushandler);
        }
    }

    if (window.addEventListener) {
        window.addEventListener('load', loadhandler, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', loadhandler); //IE87
    }

})();

//...