JSFiddle - React, Tailwind, and code Playground

by Maiki Nahara

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.0-beta.4/css/framework7.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.0-beta.4/js/framework7.bundle.min.js"></script>
<!-- App root element -->
<div id="app">
  <!-- Statusbar overlay -->
  <div class="statusbar"></div>

  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Awesome App</div>
        </div>
      </div>

      <!-- Bottom Toolbar -->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>

      <!-- Scrollable page content -->
      <div class="page-content">
        <div class="list">
          <ul>
            <li>
              <div class="item-content">
                <div class="item-media">
                  <i class="icon my-icon"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    List element title
                  </div>
                  <div class="item-after">
                    List element label
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-media">
                  <i class="icon my-icon"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    List element title
                  </div>
                  <div class="item-after">
                    List element label
                  </div>
               ...

JavaScript

var app = new Framework7({
  root: '#app',
  name: 'My App',
  id: 'com.myapp.test',
  routes: [],
});
debugger
var waypoint = new Waypoint({
  element: document.getElementById('catchMe'),
  handler: function() {
debugger
    notify('Basic waypoint triggered')
  }
})