JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/brynja/cdn/brynja.js"></script>
<div id="root_nav"></div>

<hr>

<router-view></router-view>

<router-route path="/" redirect="/home"></router-route>

<router-route path="/home">
  <div id="root_home"></div>
</router-route>

<router-route path="/login">
  <div id="root_login"></div>
</router-route>

<script src="https://unpkg.com/html-router"></script>

CSS

.nav > * {
  margin-right: 8px;
}

JavaScript

const { Renderer } = brynja;

const nav = Renderer({
  rootElement: document.getElementById('root_nav')
});

const routes = {
	login: Renderer({
    rootElement: document.getElementById('root_login')
  }),
  home: Renderer({
    rootElement: document.getElementById('root_home')
  })
};

nav.render(_=>_
	.class('nav')
	.child('button', _=>_
  	.text('Load Home!')
    .on('click', () => {
    	location.hash = '/home';
    })
  )
	.child('button', _=>_
  	.text('Load Login!')
    .on('click', () => {
    	location.hash = '/login';
    })
  )
);

routes.login.render(_=>_
	.child('h1', _=>_
  	.text('Login!')
  )
);

routes.home.render(_=>_
	.child('h1', _=>_
  	.text('Home!')
  )
);