JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="">
<div class="pages navbar-through toolbar-through" ng-controller="DemoController">
<!-- Page, data-page contains page name-->
<div data-page="index" class="page">
<!-- Scrollable page content-->
<div class="page-content">
<div class="content-block-title">Welcome To My Awesome App</div>
<div class="content-block">
<div class="content-block-inner">
<p>Couple of worlds here because my app is so awesome!</p>
<p>Duis sed erat ac eros ultrices pharetra id ut tellus.</p>
</div>
</div>
<div class="content-block-title">What about simple navigation?</div>
<div class="list-block">
<ul>
<li><a href="about.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{name}}</div>
</div>
</div></a>
</li>
<li><a href="services.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Services</div>
</div>
</div></a>
</li>
<li><a href="form.html" class="item-link">
<div class="item-content">
<div class="item-inner">
<div class="item-title">Form</div>
</div>
</div></a>
</li>
</ul>
</div>
<div class="content-block-title">Side panels</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a...
JavaScript
function DemoController($scope) {
$scope.name = "Dieter";
$scope.toggle = function () {
$scope.visible = !$scope.visible;
};
$scope.visible = true;
}