JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="view-menu">
		<button onclick="changeView('view1', 'Message 1');">View 1</button>
		<button onclick="changeView('view2', 'Message 2');">View 2</button>
		<button onclick="changeView('view3', 'Message 3');">View 3</button>
	</div>
	<div id="view-container">
		<p>press a button</p>
	</div>
</body>

CSS

.view1, .view2, .view3 {
	min-height: 240px;
	background: #ccc;
	border-width: 6px;
	border-style: solid;
}
.view1 {color: red;}
.view2 {color: blue;}
.view3 {color: green;}

JavaScript

var viewCount = 0;
function changeView(className, message) {
	// On crée un nouvel element :
	var elem = document.createElement('div');
	elem.className = className;
	viewCount++;
	elem.innerHTML = "<h1>View # " + viewCount + "</h1><p>" + message + "</p>";
	elem.addEventListener("click", function(event) {
		window.alert("clicked");
	});
	
	// On récupère le container de base :
	var container = document.getElementById("view-container");
	// On supprime tous les éléments qu'il contient :
	while (container.lastChild) {
		container.removeChild(container.lastChild);
	}
	
	// Et on y ajoute l'élément créé
	container.appendChild(elem);
}