JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/framework7.bundle.min.css">
<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
    <div id="app">
        <div class="view view-main">
        </div>
    </div>

JavaScript

var app = new Framework7({
    root: '#app',
    routes: [
        {
            path: '/',
            // url: './home.html',
            options: {
              history: true,
            },
            content: `
<div data-name="home" class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
            <div class="title">Home page</div>
            <div class="right">
                <a href="/settings/" class="link">Settings</a>
            </div>
        </div>
    </div>
    <div class="page-content hide-navbar-on-scroll">
        <div class="list links-list">
            <ul>
                <li>
                    <a href="/page1/" class="link">Page No.1</a>
                </li>
                <li>
                    <a href="/page2/" class="link">Page No.2</a>
                </li>
            </ul>
        </div>
    </div>
</div>
            `
        },
        {
            path: '/page1/',
            // url: './page1.html',
            options: {
              history: true,
            },
            content: `
<div data-name="page1" class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
          <div class="left">
              <a href="/" class="link">Home</a>
          </div>
          <div class="title">Page No.1</div>
          <div class="right">
              <a href="/settings/" class="link">Settings</a>
          </div>
        </div>
    </div>
    <div class="page-content hide-navbar-on-scroll">
        <div class="block">The content of Page No.1</div>
    </div>
</div>
            `
        },
        {
            path: '/page2/',
            // url: './page2.html',
            options: {
              history: true,
            },
            content: `
<div data-name="page2" class="page">
    <div class="navbar">
        <div class="navbar-inner sliding">
          <div class="left">
              <a href="/" class="link">Home</a>
          </div>
          <div...