JSFiddle - React, Tailwind, and code Playground

HTML

<div class="todos">
    <div class="todo">
        Todo 1
        <button data-action="remove">Remove</button>
    </div>
    <div class="todo">
        Todo 2
        <button data-action="remove">Remove</button>
    </div>
</div>

CSS

BODY {
    border: 1px solid #999;
    min-height: 300px;   
    padding: 10px;
}

.todos {
    border: 1px solid #999;
    padding: 10px 30px;
    width: 200px;
}

.todo {
    padding: 5px;
}

JavaScript

var todosEl = document.querySelector('.todos');

document.addEventListener('click', function (evt) {
    var isOutside = evt.target.closest('.todos') === null; 
    if (isOutside) {
        todosEl.style.display = 'none';
    }
}, false);

todosEl.addEventListener('click', function (evt) {
    if (evt.target.getAttribute('data-action') === 'remove') {
        var todoEl = evt.target.closest('.todo');
        todoEl.parentNode.removeChild(todoEl);
    }
});