JSFiddle - React, Tailwind, and code Playground

HTML

<button class="toggle-feature" data-toggle="random-modal">
  <span>Instrusive child</span><br>
  <span>More intrusive child</span><br>
  <span>Additional intrusive child</span><br>
</button>
<div id="random-modal">
  Some modal
</div>

CSS

#random-modal.active{
  color: red;
  background: blue;
}

JavaScript

"use strict";
// globals
var regex;
// functionality
document.onclick = function(e){
	var tf = document.getElementsByClassName("toggle-feature");
	e.stopPropagation();

	for(var i = 0; i < tf.length; i++){
		if(e.target == tf[i]){
			if(tf[i].hasAttribute("data-toggle")){
				var modal = document.getElementById(tf[i].getAttribute("data-toggle"));
				regex = new RegExp("(?:^|\\s)" + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active") + "(?!\\S)");

				if(modal.className.match(regex)){
					modal.className = modal.className.replace(regex, "");
				} else {
					modal.className = modal.className + " " + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active");
				}
			} else if(tf[i].hasAttribute("data-open")){
				var modal = document.getElementById(tf[i].getAttribute("data-open"));
				regex = new RegExp("(?:^|\\s)" + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active") + "(?!\\S)");

				if(!modal.className.match(regex)){
					modal.className = modal.className + " " + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active");
				}
			} else if(tf[i].hasAttribute("data-close")){
				var modal = document.getElementById(tf[i].getAttribute("data-close"));
				regex = new RegExp("(?:^|\\s)" + (tf[i].hasAttribute("data-class") ? tf[i].getAttribute("data-class") : "active") + "(?!\\S)");

				if(modal.className.match(regex)){
					modal.className = modal.className.replace(regex, "");
				}
			}
		}
	}
}