JSFiddle - React, Tailwind, and code Playground

by kerrydp

HTML

<link rel="stylesheet" href="https://framework7.io/packages/core/css/framework7.bundle.min.css">
<script src="https://framework7.io/packages/core/js/framework7.bundle.min.js"></script>
    <div id="app">

      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <!-- Common Navbar -->
        <div class="navbar">
          <div class="navbar-bg"></div>
          <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>

        <!-- Initial Page, "data-name" contains page name -->
        <div data-name="home" class="page">




          <!-- Scrollable page content -->
          <div class="page-content hide-navbar-on-scroll">
            <div class="block">

              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut lacus orci. Curabitur dictum mattis luctus. Curabitur vitae leo quis nibh mollis molestie ac eget ligula. Phasellus molestie nisi eget lectus porttitor, id finibus dui luctus. Fusce porta eros non varius faucibus. Quisque risus odio, viverra ac sapien vel, ultrices ultricies dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

              <p>
                >Nam blandit blandit auctor. Praesent eu placerat arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut viverra, libero non accumsan aliquet, sapien ipsum varius turpis, ac suscipit nulla turpis at metus. Sed eget dictum augue. Donec tincidunt, neque accumsan ullamcorper vehicula, arcu arcu iaculis dolor, at mattis erat...

JavaScript

var app = new Framework7();

var $$ = Dom7;

$$('.hide-navbar').on('click', function () {
  app.navbar.hide('.navbar');
});
$$('.show-navbar').on('click', function () {
  app.navbar.show('.navbar');
});

var mainView = app.views.create('.view-main');