JSFiddle - React, Tailwind, and code Playground

CSS

a { margin: 4px; }

JavaScript

function viewTemplate(content) {
  return function() {return [
    m('#header', [
      'my site',
      m('a', {config:m.route, href:'/'}, 'home'),
      m('a', {config:m.route, href:'/1'}, 'page 1'),
      m('a', {config:m.route, href:'/2'}, 'page 2'),
    	m('hr')
    ]),

    m("#view", content),

    m('#footer', ['copyright my site']),
  ]}
}

home = {
	view: viewTemplate([
  	m('h1', 'Home page')
  ])
}
component1 = {
  view: viewTemplate([
    m('h1', 'component 1 page')
  ])
}

component2 = {
  view: viewTemplate([
    m('h1', 'component 2 page')
  ])
}

m.route(document.body, '/', {
  '/': home,
  '/1': component1,
  '/2': component2,
})