JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.7.1/css/framework7.ios.colors.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.7.1/css/framework7.ios.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.7.1/js/framework7.js"></script>
<body>
  <!-- Status bar overlay for full screen mode (PhoneGap) -->
  <div class="statusbar-overlay"></div>
  <!-- Panels overlay-->
  <div class="panel-overlay"></div>
  <!-- Left panel with reveal effect-->
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p>Left panel content goes here</p>
    </div>
  </div>
  <!-- Views -->
  <div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
      <!-- Top Navbar-->
      <div class="navbar">
        <div class="navbar-inner">
          <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
          <div class="center sliding">Awesome App</div>
          <div class="right">
            <!-- 
                Right link contains only icon - additional "icon-only" class
                Additional "open-panel" class tells app to open panel when we click on this link
              -->
            <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
          </div>
        </div>
      </div>
      <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
      <div class="pages navbar-through toolbar-through">
        <!-- Page, "data-page" contains page name -->
        <div data-page="index" class="page">
          <!-- Scrollable page content -->
          <div class="page-content">
            <p>Page content goes here</p>
            <!-- Link to another page -->
            <a href="about">About app</a>
          </div>
        </div>
      </div>
      <!-- Bottom Toolbar-->
      <div...

JavaScript

var app = new Framework7({
  routes: [{
    path: 'about',
    content: '<h1>Hi</h1>'
  }]
});